标签云

微信群

扫码加入我们

WeChat QR Code

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.<body><div>Div to be aligned vertically</div></body>How can I center a div vertically in all major browsers, including Internet Explorer 6?


MarcoDemaio Don't people constantly frown upon tables for layouts on here?

2019年05月24日10分53秒

Chud37: it depends what you have to do, tables for layout are generally not versatile and long to type in code, with css you can easily change a 2 cols layout into a 3/4/5 sols layout etc. But in this case is different, using dozens of css tips-and-tricks for such a simple task that could be accomplished with a perfect cross-browser table, it's like attempting to enter in your house through the window instead of using the door.

2019年05月24日10分53秒

The BEST answer to this question can be found at stackoverflow.com/a/13075912/5651

2019年05月23日10分53秒

Just see this answer that vertically align a div in other div. Vertically Aligning Divs

2019年05月24日10分53秒

I just want div { vertical-align:center; } to work. Why is that so hard?

2019年05月24日10分53秒

Without an "absolute" outer DIV, any content on the page before it will push the whole block down. This makes it more independent of other page content.

2019年05月23日10分53秒

.outer {position:absolute;width:100%;height:100%} is not necessary, they are here simply for demonstrating. All we need is display:table, if anyone is confused as I was.

2019年05月24日10分53秒

I've noticed that this needs 99% to avoid scroll bars. More important, this works with only the first two divs, say keep .outer and middle and plainly ignore the .innerand its style. I don't know what is the point of margin-left, margin-right set to auto since that doesn't center the element horizontally??!!!

1970年01月01日00分03秒

Removing width: 100%; and adding margin: 0 auto to .outer allows variable width as well.

2019年05月24日10分53秒

user10089632 No, it is not issue of width or height but position. top: 0; left 0; is missing, at least in Chrome which sets default to 1.

2019年05月24日10分53秒

This worked for me, but I needed to have a fixed width and height in chrome for some reason

2019年05月24日10分53秒

Thank you. I needed a fix where I didn't need to calculate px height or width and this worked perfectly.

2019年05月24日10分53秒

Great solution, especially because you don't need a parent div

2019年05月24日10分53秒

This does a stretch if the height is not fixed, other than that: nice solution

2019年05月24日10分53秒

If you have a width and height that are not 100%, use margin: auto;

2019年05月24日10分53秒

note: doesn't work correct if the height of the outer div is set with "min-height: 170px"

2019年05月24日10分53秒

Interferes with z-index

2019年05月24日10分53秒

Doesn't work if content has float.

2019年05月24日10分53秒

doesn't work when height of outer div is 100%. Then only works with position: absolute;.

2019年05月24日10分53秒

I had found this solution elsewhere first, but extra kudos to this particular answer for mentioning the -webkit-transform variant in particular, which I needed to make this method work in phantomjs... ended hours of struggling so thank you!

2019年05月24日10分53秒

Thanks!!! Worked for me. Do you mind explain a little how you came up with it?

2019年05月24日10分53秒

it's an old trick... top 50% and the top margin negative half the height for the inner div

2019年05月23日10分53秒

it's assuming you have a fixed height for div. don't work when div can change height.

2019年05月23日10分53秒

i have compiled a list of all ways that are useful..jsfiddle.net/k6ShD/4

2019年05月24日10分53秒

worked for me without height:100%; thanks

2019年05月23日10分53秒

If you've got a navbar, you can tweak the height using height: calc(100% - 55px) or whatever the height of your navbar is.

2019年05月24日10分53秒

i also had to remove margins/padding from body

2019年05月23日10分53秒

This does works really well, provided you remember that the container element must have an implicit or explicit height; jsfiddle.net/14kt53unA minor gotcha to those who are relatively new to CSS.

2019年05月24日10分53秒

Out of all the answers, this is the most simplest! I hope others see your answer too! Thank you! By the way, 50% worked for me (not -50%)

2019年05月23日10分53秒

this only worked with position:absolute for me.

2019年05月24日10分53秒

Only works with fixed heights...

2019年05月24日10分53秒

ArmelLarcier, no, it works with relative height also.

2019年05月24日10分53秒

50% height is fixed. It is not relative to content, but parent.

2019年05月23日10分53秒

ArmelLarcier That's incorrect. Relative units are percentages %, ems and rems. Absolute or fixed values are pixels or points. What you're referring to is "it only works with a declared height". Howevever, although this method described by Moes does require a height, when you declare it in relative units, percentage is the best, no matter how much content is inside the centered DIV that DIV will expand vertically to fit its content. That's the beauty of this method. The other good thing is that this method works in IE8/9/10 in case someone still needs to support those browsers.

2019年05月24日10分53秒

ArmelLarcier It's all good. Is not wrong brother. Try it: codepen.io/shshaw/pen/gEiDt - Add paragraphs to the green box ;]. Granted, it uses Modernizr to accomplish the effect, but all in all it's doable. I saw your answer and the CSS-Tricks.com post as well, but that method doesn't make me happy, it uses extra markup and the CSS is too verbose. I think the best solution is either using flexbox or the transform: translate(-50%, -50%); technique. For IE8 I'd just leave it top/center aligned and move on.

2019年05月24日10分53秒

Notejustify-content: center will center items horizontally as well

2019年05月24日10分53秒

Android < 4.4 doesn't support align-items: center; !

2019年05月24日10分53秒

Actually, it does support align-items: center;caniuse.com/#search=align-items

2019年05月24日10分53秒

t.mikael.d You might want to take a closer look at that table. For Android < 4.4, it states "Only supports the old flexbox specification and does not support wrapping."

2019年05月23日10分53秒

IE9 does not support flexbox. Maybe you meant "if someone cares about IE10+ only"?

2019年05月23日10分53秒

ChrisBier Sure. Fixed. Thx.

2019年05月23日10分53秒

Indeed the easiest one yet :) Although, I had to set the styles to a outer-div, instead of body.

2019年05月24日10分53秒

p.s. updated my answer

2019年05月23日10分53秒

This answer is similar to this one: stackoverflow.com/a/24570521/363573.

2019年05月24日10分53秒

You forgot to horizontally center the content. Add text-align:center; to the .inner-container.

2019年05月23日10分53秒

DougS : I didn't forget to horizontally center the content. I did not add horizontal centering because the question only mentions vertical centering.

2019年05月24日10分53秒

DougS : I just added some info on how to also center horizontally!

2019年05月24日10分53秒

CSS transforms can cause distortions in text and borders (when the math results in fractional pixels).

2019年05月23日10分53秒

Interesting! I'm using an almost identical technique! -> stackoverflow.com/questions/396145/…

2019年05月24日10分53秒

Thats only good if you know the width/height of the DIV your trying to center. This isn't what the question is asking

2019年05月24日10分53秒