Positioning a div near bottom side of another div

Question

I have outer div and inner div. I need to place inner div at the bottom of the outer one.

Outer div is elastic (width: 70% for example). I also need to center inner bloc

Answer 1

CSS3 Flexbox allows the bottom positioning very easily. Check the Flexbox support table

HTML

CSS

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

Output:

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}