CSS vertical align center a div inside another div

Vertical align middle works by using display: table-cell on parent element and display: inline-block on the child.

<div class="parent">
	<div class="child">your content</div>
</div>
div.parent {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

div.child {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}

By Keenlio, February 27, 2014

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *


one + = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>