Comments on: Centering in CSS: A Complete Guide

By: Carla

Carla — Sat, 11 Oct 2014 23:44:03 +0000

The line height option for vertical centering works great.

I’m not understanding, though, when to use min-height. If I’m setting a fixed height and line height for a full-width toolbar at the top, would responsiveness be an issue?

Thanks for the tutorial!

By: lordfpx

lordfpx — Thu, 02 Oct 2014 22:21:09 +0000

Thanks for the tips, I also like this method that will also work on IE8: It's based on inline-block and the use of pseudo-element.

By: Tata

Tata — Mon, 29 Sep 2014 13:52:29 +0000

In reply to Scott Fennell. Excellent tricks! I tried to apply some of them in my responsive template. But here it doesn't work as expected. The problem is: 1. I have 4 floating divs

#submain_line{
    min-height: 10rem;
    background: #444;
}
.container{
    max-width: 1000px;
    margin: 0 auto;
}
.box{
    width: 24%;
    float: left;
    margin: 0.5%;;
    background: #666;
    color: #ddd;
    font-size: 0.8rem;
}
.box_content{
    margin: 0.5rem;
}

In responsive parts the width of boxes are set to 49%, resp. 100% and all boxes are floating left. I tried to make all boxes of the same height. In full width of the page the style

  display: inline-block;
  text-align: left;

works fine. But on narrower displays the boxes responsivity is ignored and they stay always 4 in one row. What's wrong here?

By: Dan Henderson

Dan Henderson — Sat, 13 Sep 2014 07:09:03 +0000

Nice one. There is always a bunch of different options, but I think the frustration boils down to no fool proof way of vertically centring something with decent browser support and not adding a some sort of extra markup. Always feels a bit hacky and dirty whichever way I end up going, but I guess vertical centring isn’t alone there.

If the height of the parent is known, I usually add that as a line-height on that parent and inline block the child, so the height of the child can be variable. If the height of the parent is unknown I usually absolutely positioned child and move it around as need be.

By: Krish

Krish — Fri, 12 Sep 2014 18:15:56 +0000

cool stuff, i like to read your blogs

By: Casper Kuijjer

Casper Kuijjer — Wed, 10 Sep 2014 18:58:50 +0000

Hi Chris,

Do you know if there are any options to vertically center text based on its x-height instead of the entire height of the text? When the container is slightly larger than the font-size this might be preferred.

The option I could think of only works for a single line of text and consists of adding a pseudo element with height set to the height of its container and vertical-align: middle; applied.

See http://codepen.io/ckuijjer/pen/nIGCt

By: andychups

andychups — Tue, 09 Sep 2014 19:29:48 +0000

“Is the element of unknown width and height?” – i preffer bulletproof, oldschool solution with table http://codepen.io/andychups/pen/CDLxK.

By the way, i like this tweet: “The easiest way to vertically center something in CSS is to close your laptop and go to the bar.” @bleikamp

By: Rajesh

Rajesh — Mon, 08 Sep 2014 11:07:37 +0000

Thanks a lot for your great information. It’s a must read information for CSS beginner.

By: Vishnu Haridas

Vishnu Haridas — Sun, 07 Sep 2014 19:23:53 +0000

Well organized article. Centering in CSS is always a pain for the web developers. This guide is a life saver for them! I always used the line-height for vertical alignment for texts. Otherwise, I think of using Javascript to align elements while loading the page ;-) but that's not the right way! Thanks for the article!

By: Pierre

Pierre — Sat, 06 Sep 2014 11:31:30 +0000

Hi Chris, great article as always and very useful !
Careful, the CodePen examples are shifted from one branch/paragraph to another (e.g. : ghost elements example should be in Vertically/inline/multiple lines, is actually in Vertically/block/do you know height)
Cheers, Pierre

By: Amanda

Amanda — Fri, 05 Sep 2014 16:54:46 +0000

I love this site so much! I’ve solved many CSS problems by coming here! Thank you Chris!

By: Ricardo Zea

Ricardo Zea — Fri, 05 Sep 2014 03:51:32 +0000

I personally have never used value “0” when using margin. I’ve always used margin:auto;, that’s it. Never have I had any issues whatsoever leaving that 0 out.

Just sayin’.

Awesome decision tree idea!

By: Matt

Matt — Fri, 05 Sep 2014 03:48:01 +0000

You, sir, deserve a thumbs up!

By: Mazurka

Mazurka — Thu, 04 Sep 2014 15:59:46 +0000

In reply to Thomas. Appearntly there is a fix by adding preserve-3d to the parent.

By: Michael Bjerregaard

Michael Bjerregaard — Thu, 04 Sep 2014 10:22:47 +0000

Sweet jesus! The transform: translate(-50%, -50%); is totally awesome… I can’t believe I never thought about this. I was not aware that this was so well supported.

Life just got better :-)

Thx Chris for serving a very useful guide!