Return to Candy by James homepage

Vertically centring in css (without hacks and multi-line enabled)

Chris Coyier over at css-tricks.com had a great example of a css conun­drum: how to centre, both ver­tic­ally and hori­zont­ally, mul­tiple lines of text. He some good code (using table-cell) but his code for IE relied on some (script)expressions which can have the unfor­tu­nate habbit of slow­ing down a page.

[update: to get a bit more back­ground on abso­lute & rel­at­ive pos­i­tion­ing, and how to cen­ter hori­zont­ally, read:  On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.]

The reg­u­lar way of ver­tic­ally cent­ring in css has been doc­u­mented by Dušan Janovský back in 2004. It needs an extra div for its IE solu­tion, but it doesn’t require any expres­sions, only reg­u­lar (fast!) css. Because a div-tag is semantic­ally empty (like the span-tag), it doesn’t add any wrong semantic mean­ing (like a table-tag would).

The .area div isn’t stricly neces­sary, but it was in the ori­ginal prob­lem posed in the css-tricks.com art­icle. I have how­ever edited out the super­flu­ous back­ground declar­a­tion, as it doesn’t have any­thing to do with positioning.

I’ve updated the example to use con­di­tional com­ments instead of hacks. The html (in your page) becomes:

<div class="area" id="two">
<div class="bubble">
<div>
<p>Doing this may not be as easy or obvious as we would hope.</p>
</div>
</div>
</div>

The css (in your stylesheet) becomes:

.area {width:300px; height:300px; position:relative; float:left; }
.bubble {position:absolute; left:93px; top:21px; width:135px; height:84px; display:table; }
.bubble div {display:table-cell; vertical-align:middle; text-align:center;}

The IE spe­cific css (in your html-page) becomes:

<!--[if lt IE 8]>
<style>
.bubble div {position:absolute; top:50%;}
.bubble div p {position:relative; top:-50%}
</style>
<![endif]–>

Have a look at the demo to see what you should end up with. Questions welcome!

Have a look at more CSS

7 Responses to “Vertically centring in css (without hacks and multi-line enabled)”

  1. Lotus says:

    I did not want to use abso­lute pos­i­tion­ing, so I did the following:

    .video­Post div{
    pos­i­tion: rel­at­ive;
    top: 25%;
    height: 25%;
    }

    inspired by the above blog post. Probably the same tech­nique. Thanks for the info!

    • Why would you not want to use abso­lute positioning?

      I’ve heard this before, and I don’t know where it comes from, but there’s seem­ingly some kind of scare-mongering going on…

  2. David says:

    I genu­inely have no idea what this is sup­posed to prove? The ‘bubble’ class simply has top, left, width and height positions/dims added? Great? Er, so what does this code improve upon? Can’t see how this solves anything?

    • It’s not so much an improve­ment on Dušan Janovský’s code, but rather on the code at css-tricks. It’s the use of display:table-cell on the div inside .bubble, and the fix for IE that is seper­ated out nicely in con­di­tional com­ments that are the biggest gains com­pared to the code in the css-tricks article.

Care to Comment?

Possibly related content

  1. On Horizontal CSS Centering using Absolute Positioning or how Relative Positioning can rock your css.
  2. CSS3 @font-face browser support table 2010
  3. CSS3 @font-face browser support table 2012
  4. Elastic, Liquid, Pixel: Explained.
  5. Why I use HTML (instead of xHTML)

James John Malcolm MMXIV