div align center bottom CSS

[ruwanaru]

need to alight div inside another div
inner div must be aligned centerd bottom of the outer div
i have attached a image that i want

[ryantroop]

https://jsfiddle.net/6jbgqz0g/

<div class="parent">
  <div class="bottom"></div>
</div>

.parent
{
  position: relative;
  display: block;
  width: 300px;
  height: 200px;
  background-color: #25f;
}

.bottom
{
  position: absolute;
  width: 50px;
  height: 10px;
  left: 50%;
  margin-left: -25px;
  bottom: 0;
  background-color: #4ff;
}