标签云

微信群

扫码加入我们

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年08月19日34分52秒

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年08月19日34分52秒

In case people don't care about older browser support: davidwalsh.name/css-vertical-center

2019年08月19日34分52秒

MarcoDemaio : Because using tables with valign doesn't work? :)

2019年08月19日34分52秒

Here is lots of ways to do it css-tricks.com/centering-css-complete-guide

2019年08月19日34分52秒

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年08月19日34分52秒

.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年08月19日34分52秒

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年08月19日34分52秒

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年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月20日34分52秒

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

2019年08月19日34分52秒

Interferes with z-index

2019年08月19日34分52秒

Doesn't work if content has float.

2019年08月19日34分52秒

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

2019年08月19日34分52秒

This is the best answer. This is incredibly simple, messes with the least amount of existing work and functions on everything as far back as IE9 which nobody even uses anymore. Lets get this guy some more upvotes!

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

worked for me without height:100%; thanks

2019年08月19日34分52秒

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年08月20日34分52秒

i also had to remove margins/padding from body

2019年08月19日34分52秒

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年08月19日34分52秒

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年08月19日34分52秒

this only worked with position:absolute for me.

2019年08月19日34分52秒

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年08月19日34分52秒

ricardozea I don't mean to play stubborn but saying the centered div will expand vertically while remaining vertically centered is wrong. Try it. I know when I say the height must be "fixed", that it's not the right word. It is indeed relative, to its parent. Anyway I think Chris Coyer's method makes more sense, see my answer stackoverflow.com/a/21919578/1491212 It's compatible with IE8 AND does work on an element with no specified dimensions.

2019年08月19日34分52秒

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年08月19日34分52秒

ricardozea Well the codepen you linked to uses the "display: table" method and extra markup so I'm not surprised. Anyways, +1 to your last sentence.

2019年08月19日34分52秒

Notejustify-content: center will center items horizontally as well

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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

2019年08月19日34分52秒

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年08月19日34分52秒

Please add a Stack Snippet showing how this CSS code vertically aligns a div.

2019年08月19日34分52秒

this works too<div style="display:flex"><div style="margin:auto">Inner</div></div>

2019年08月19日34分52秒

I came across with this wonderful explanation of align items and justify content.Must Read : stackoverflow.com/questions/42613359/…

2019年08月19日34分52秒