Read more

CSS: Vertically center with display: table-cell

Dominik Schöler
November 10, 2012Software engineer at makandra GmbH

We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle Show archive.org snapshot ).

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

The children need to be block elements.

The HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  ...
</div>

The CSS

.parent {
  display: table-cell;
  vertical-align: middle;
  width: 500px;
  height: 300px;
}
      
.child {}

When .child elements are inline elements, add display: block; to their style.
When you need to specify the width of .child elements, center them with margin: auto;.


This works in IE8+, Firefox 15.0+, Chrome 22.0+, Safari 5.1+ and Opera 12.0+.

Posted by Dominik Schöler to makandra dev (2012-11-10 12:45)