标签云

微信群

扫码加入我们

WeChat QR Code

This question already has an answer here:How to center an element horizontally and vertically19 answersI have a div element which contains text, and I want to align the contents of this div vertically center.Here is my div style:#box {height: 170px;width: 270px;background: #000;font-size: 48px;color: #FFF;text-align: center;}<div id="box">Lorem ipsum dolor sit</div>What is the best way to do this?


#box{line-height: -moz-block-height;}

2019年05月24日23分41秒

Because it goes wrong if the div or text changes or more content is added.

2019年05月24日23分41秒

But this is what he said, if you know how much text you will use its perfectly acceptable... the solution below is however more flexible

2019年05月23日23分41秒

Only 3rd approach works well on my Firefox 22.0, however it does not work for all browsers. First 2 approaches stop working properly once I change height size for the div

2019年05月24日23分41秒

How can I achieve same goal with div's height set to: "height: 100%;" ?

2019年05月23日23分41秒

The table-cell technique is pretty cool, but the content is then resized to fit the parent container. Here's an awesome technique from CSS Tricks, using the pseudo-element before: css-tricks.com/centering-in-the-unknown . The content isn't resized this way, but it only works in IE8+.

2019年05月23日23分41秒

Flexbox support table

2019年05月24日23分41秒

This works well for me too, the rest of the above not working on my site. But visual studio does not recognize display: flex.

2019年05月24日23分41秒

The fiddle does not work at all, text is still on the top edge

2019年05月23日23分41秒

if I have some tag <p> inside, every text appears in the same line. How to make it break line?

2019年05月23日23分41秒

It doesn't work with text in multiple lines? At least for me (a div inside an overlay). EDIT: adding text-align: center did the trick! Thanks!

2019年05月24日23分41秒

Looks like that kills the margin attributes, though.

2019年05月23日23分41秒

Costa -- You may have to float the parent div as well, if you are floating something inside of this div... check out stackoverflow.com/questions/2062258/…

2019年05月24日23分41秒

sadly, this does not support vertical scrolling..probably because of the display: table-cell..:(

2019年05月23日23分41秒

It disables min-heigth.

2019年05月24日23分41秒

Pure CSS: did the trick for me, but I somehow had to use absolute positioning..

2019年05月24日23分41秒

I had the same issue as d4Rk. My (block) container had relative positioning, and height, and the item needing vertical centering (an image) had to be absolutely positioned.What a complicated/simple problem!! Here's hoping there's a simple/simple fix in the next version of CSS.

2019年05月24日23分41秒

changing the font size it moves all over the place

2019年05月24日23分41秒

Could you please explain why does flex have this effect in this case on centering the paragraph?

2019年05月23日23分41秒

elena In fact, I don't know exactly why, I discovered when I was trying. However, it would be a consideration for newer versions of CSS. For instance, if you change the display to grid in this case, it will be worked as the same as flexboxes. I think grids and flexboxes comes with new features to compensate the previous faults of CSS; and this trick is one of them.

2019年05月24日23分41秒

Thanks 'satwik boorgula', I don't think your code problems, maybe there're some conflict in my code.I test with this code:<div id="topper" class="container"> <span>Your Content!</span> </div>But it can fixed by use code as 'michielvoo' mentioned above.

2019年05月24日23分41秒

It works great. Just a comment for some readers: this code is Sass.

2019年05月24日23分41秒

But this is not vertical center....

2019年05月23日23分41秒

It is if you change "top: 45%;" to "top:50%;". Just tried with one, two, three lines in a circle, and the center was aligned perfectly.

2019年05月23日23分41秒

Out of all of the methods described here, yours was the only one that did the magic. My case: a div that had a span element with a spinning clock icon using css (for a loading layer). I just removed "TextContent" (leaving the property as an empty string) for #box::after and that was it.

2019年05月23日23分41秒

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

2019年05月23日23分41秒