Vertically aligning a div in the middle using css

Posted By : Arun Kumar | 27-Dec-2014

html5

This post is about various methods of centering elements in html using css.

Lets create the html markup first.

<div class="parent">

    <div class="child">Content</div>

</div>

Now,css rules that can be applied to center the child element in the middle of the parent element.

Mehod # 1 : Table Method

.parent {display:table;}

.child {display:table-cell;vertical-align:middle;}

Method # 2 : Flexbox Layout

.parent {

 display: -webkit-flexbox;

 display: -ms-flexbox;

 display: -webkit-flex;

 display: flex;

  -webkit-flex-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

  text-align: center;

}

Method #3 : translate() method

.parent{position: relative;}

.child {

  position: absolute;

  left: 50%;

  top: 50%;

  margin-left: -25%;

  margin-top: -25%;

  transform: translate(-50%, -50%);

  width: 40%;

  height: 50%;

}

Method # 4 : Absolute Positioning and Stretching

.parent {position: relative;}

.child {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: 50%;

    height: 30%;

    margin: auto;

}