What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?
"display: table-cell" with "vertical-align: middle" works.
The complete guide to centering a div
31–40 of 170 posts
Re: The complete guide to centering a div
#32nice list, would be nicer to have a more detailed definition of "modern browsers" , like browser types/versions that support each method.
Re: The complete guide to centering a div
#33> Centering a div Within a div, Horizontally and Vertically The code in this section is incorrect. "margin: auto" does nothing in the vertical direction. If you set the height of the outer div to something more than 160 px, you will see that the inner div is not centered.
Came here to say the same thing. Not sure the rest of the article is worth reading if the author doesn't know CSS well enough that a) they don't know a priori that this is wrong, and b) manages to convince themselves it's true using Codepen Here's the Codepen that shows it with a larger outer div, http://codepen.io/jessedhillon/pen/CDqEe
No, it doesn't work with a fixed height. I didn't claim it did, of course. In a responsive world fixed heights in a container are somewhat irrelevant, but I'll amend the article.
Re: The complete guide to centering a div
#34I wrote this five years ago. I'm somewhat dismayed at how relevant it still is today:
Re: The complete guide to centering a div
#35What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?
"display: table-cell" with "vertical-align: middle" works.
That this is missing is surprising. This method is the most compatible across browsers and only real drawback is the additional markup.
Re: The complete guide to centering a div
#36I've been using Flexbox for a while now. Unless you need to support older IE than it is quite usable. The one problem is the older syntax for IE10 but it is fixed in IE11 and going forward.
Re: The complete guide to centering a div
#37I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I would think CSS positioning would be a one-liner, but instead it's a collection of context-dependent, browser-dependent recipes. I wonder if there's a good reason for the madness, or if it's just poor design. (FWIW, I'm a backend engineer and have only dabbled…
The thing that boggles my mind is that we're over ten years and three major versions in and we can't center stuff reliably or conveniently, images won't scale up to fit (only down...), multi-column text is barely implemented and Google is ripping it out, the box model is borked by default, it's non-trivial to determine the layering of UI elements, and so on.
It's amazing that we get solutions for things that no-one really needs (animated 3d transitions...) while bread and butter stuff still requires rocket science. Back in 2005 I used to joke that 90% of the world's Javascript was just doing button rollovers (probably a conservative estimate) — well, CSS eventually fixed that, kind of — now Javascript is mostly doing similarly idiotic stuff like handling resizing, making things that aren't lists impersonate lists because multi-selects are borked, centering stuff, and trying to reliably hook up event handlers.
All of which were solved problems before the web was born.
Re: The complete guide to centering a div
#38Earlier quoted context omitted.
Came here to say the same thing. Not sure the rest of the article is worth reading if the author doesn't know CSS well enough that a) they don't know a priori that this is wrong, and b) manages to convince themselves it's true using Codepen Here's the Codepen that shows it with a larger outer div, http://codepen.io/jessedhillon/pen/CDqEe
No, it doesn't work with a fixed height. I didn't claim it did, of course. In a responsive world fixed heights in a container are somewhat irrelevant, but I'll amend the article.
What? It doesn't work at all -- without a fixed height, the height of #outer would be determined by summing the heights of its statically/relatively positioned children.
If there were multiple children of #outer, #inner would still not be centered vertically. This only works for some trivial definition of vertical centering, when what you really mean is that a single block child will occupy the vertical center position of its block parent, provided the parent's height is not specified. Which is the most obvious of statements in CSS.
Re: The complete guide to centering a div
#39anyone miss tag? :)
Re: The complete guide to centering a div
#40I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I would think CSS positioning would be a one-liner, but instead it's a collection of context-dependent, browser-dependent recipes. I wonder if there's a good reason for the madness, or if it's just poor design. (FWIW, I'm a backend engineer and have only dabbled…
The thing that boggles my mind is that we're over ten years and three major versions in and we can't center stuff reliably or conveniently, images won't scale up to fit (only down...), multi-column text is barely implemented and Google is ripping it out, the box model is borked by default, it's non-trivial to determine the layering of UI elements, and so on. It's amazing that we get solutions for things that no-one r…
Good thing we are practically putting all our eggs in this basket.
HTML and CSS will be our document structure, and javascript will describe how the document behaves. Truly a universal standard for the ages.
Humans are dumb.