Comments on: Centering in CSS: A Complete Guide https://css-tricks.com/centering-css-complete-guide/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 02 Aug 2021 14:45:40 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Carla https://css-tricks.com/centering-css-complete-guide/#comment-1585860 Sat, 11 Oct 2014 23:44:03 +0000 http://css-tricks.com/?p=181375#comment-1585860 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585667 Thu, 02 Oct 2014 22:21:09 +0000 http://css-tricks.com/?p=181375#comment-1585667 Thanks for the tips, I also like this method that will also work on IE8:

http://codepen.io/anon/pen/CmlDL

It’s based on inline-block and the use of pseudo-element.

]]>
By: Tata https://css-tricks.com/centering-css-complete-guide/#comment-1585556 Mon, 29 Sep 2014 13:52:29 +0000 http://css-tricks.com/?p=181375#comment-1585556 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585255 Sat, 13 Sep 2014 07:09:03 +0000 http://css-tricks.com/?p=181375#comment-1585255 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585240 Fri, 12 Sep 2014 18:15:56 +0000 http://css-tricks.com/?p=181375#comment-1585240 cool stuff, i like to read your blogs

]]>
By: Casper Kuijjer https://css-tricks.com/centering-css-complete-guide/#comment-1585185 Wed, 10 Sep 2014 18:58:50 +0000 http://css-tricks.com/?p=181375#comment-1585185 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585156 Tue, 09 Sep 2014 19:29:48 +0000 http://css-tricks.com/?p=181375#comment-1585156 “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 https://css-tricks.com/centering-css-complete-guide/#comment-1585094 Mon, 08 Sep 2014 11:07:37 +0000 http://css-tricks.com/?p=181375#comment-1585094 Thanks a lot for your great information. It’s a must read information for CSS beginner.

]]>
By: Vishnu Haridas https://css-tricks.com/centering-css-complete-guide/#comment-1585086 Sun, 07 Sep 2014 19:23:53 +0000 http://css-tricks.com/?p=181375#comment-1585086 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585071 Sat, 06 Sep 2014 11:31:30 +0000 http://css-tricks.com/?p=181375#comment-1585071 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585063 Fri, 05 Sep 2014 16:54:46 +0000 http://css-tricks.com/?p=181375#comment-1585063 I love this site so much! I’ve solved many CSS problems by coming here! Thank you Chris!

]]>
By: Ricardo Zea https://css-tricks.com/centering-css-complete-guide/#comment-1585044 Fri, 05 Sep 2014 03:51:32 +0000 http://css-tricks.com/?p=181375#comment-1585044 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 https://css-tricks.com/centering-css-complete-guide/#comment-1585043 Fri, 05 Sep 2014 03:48:01 +0000 http://css-tricks.com/?p=181375#comment-1585043 You, sir, deserve a thumbs up!

]]>
By: Mazurka https://css-tricks.com/centering-css-complete-guide/#comment-1585028 Thu, 04 Sep 2014 15:59:46 +0000 http://css-tricks.com/?p=181375#comment-1585028 In reply to Thomas.

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

]]>
By: Michael Bjerregaard https://css-tricks.com/centering-css-complete-guide/#comment-1585010 Thu, 04 Sep 2014 10:22:47 +0000 http://css-tricks.com/?p=181375#comment-1585010 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!

]]>