Upcoming Webinar: Jump Start Your Automated Testing Efforts With Record & Play Save Your Seat

Blog We love to talk!

Feb Thu

Cross Browser Vertical Center

  •  2-11-2016

Sometimes things that look easy can be surprisingly hard to accomplish in CSS. One of these things is the vertical centering of a simple text block. On the first glance it is not painfully obvious how one would go about this but once you stop trying to be clever it is really rather easy.

The below example will center a paragraph of text vertically using nothing but HTML and CSS. And the best part? This is cross browser compatible back to Internet Explorer 7! Enjoy!

The HTML with a simple text paragraph:

<p>This is the text that should be located at the vertical center!</p>

The CSS to make it appear in the vertical center:

html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}

body {
   display: table;
}

p {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

See it in action in this fiddle.

Photo by Michael Coghlan

No Comments

Leave a Reply

Your email address will not be published.