My utmost favourite technique for centering unknown width and height DIV's/elements perfectly center in the page is using 2dtransforms. I've created a Codepen here that shows off the technique, it's simple and well supported IE9+: http://codepen.io/Figurated/pen/zcypx — if you don't need to support IE8 any more, it's a perfect solution.
The complete guide to centering a div
71–80 of 170 posts
Re: The complete guide to centering a div
#72Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?
> With tons of comments and discussion too To be fair, the majority of comments tend to either be ones like yours, or ones elaborating on the "CSS is somehow well-designed" front. As others have noted, tools like flexbox make what the article is trying to accomplish easy. The issue is that lots of users run really old browsers, so if you want a single solution across your user population, you're going to have to reso…
Well no, the issue is that we're getting close to 20 years since CSS was introduced and they only got around to introducing something that makes this basic simple task 'easy'[1] relatively recently. It's not even like this was some basic part of CSS2 that got ignored by vendors, it became a candidate recommendation for CSS3 in 2012.
[1] It makes it 'easy' by introducing yet another weird box modelism that doesn't really fit anything else that's already there. It's really as much a symptom of these problems as a solution, imo.
Re: The complete guide to centering a div
#73I 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…
"It's amazing that we get solutions for things that no-one really needs (animated 3d transitions...)"
I believe you will see some really amazing animated 3d ransitions used in production very soon, and they happen to be necessarily for the user experience, reducing needed document space for larger amounts of visual blocks.. at least in the projects I know they are being developed on.
Re: The complete guide to centering a div
#74Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?
Surely we can agree: designing text and images in a fixed frame without alternatives for accessibility is a completely different ball game then designing for screens of immensely variable dimensions with audiences as diverse as completely blind users and search engine bots. Does anyone have an alternative to CSS that tries to take on a problem this big?
To be fair, CSS is hard even if you're only designing for one screen/device.
Re: The complete guide to centering a div
#75Earlier quoted context omitted.
I may be using words incorrectly, and I'm not positive you can even make the distinction, and I am happy to stand corrected, but it always seemed to me that CSS was fine for style , but terrible for layout . So I think I'm agreeing with you.
Right, to me plain HTML tables are great for overall master page layout yet it seems everything I've read and the few web geniuses I've met will deride using them over CSS.
Same here. It's amazing how convoluted "modern" CSS can be compared to simple, reliable tables.
Re: The complete guide to centering a div
#76Earlier quoted context omitted.
> With tons of comments and discussion too To be fair, the majority of comments tend to either be ones like yours, or ones elaborating on the "CSS is somehow well-designed" front. As others have noted, tools like flexbox make what the article is trying to accomplish easy. The issue is that lots of users run really old browsers, so if you want a single solution across your user population, you're going to have to reso…
Well no, the issue is that we're getting close to 20 years since CSS was introduced and they only got around to introducing something that makes this basic simple task 'easy'[1] relatively recently. It's not even like this was some basic part of CSS2 that got ignored by vendors, it became a candidate recommendation for CSS3 in 2012 . [1] It makes it 'easy' by introducing yet another weird box modelism that doesn't re…
I'm not sure what your point is. Web standards have had a turbulent history? Of course that's true.
- CSS 2 was originally published as a recommendation in 1998. CSS 2.1 was pushed as a recommendation in 2011. Maybe something was wrong?
- "Ignored by vendors" is a bit of an understatement, because your "close to 20 years" includes 5 years of the vendor with 90% marketshare not releasing anything at all.
- FWIW, what became flexbox was useable (assuming polyfills aplenty) in Firefox and Webkit browsers 5 years ago[1]. It took some time to standardize, but while frustrating in the present, it's ok to take time to make sure the spec works, because it will be (in theory) around for quite a while.
> It makes it 'easy' by introducing yet another weird box modelism that doesn't really fit anything else that's already there
What many people don't appreciate about layout in general (and WRT to the web, dynamic layout in particular), is that it turns out to be difficult (and sometimes extremely computationally expensive) to implement an expressive layout system that does what we intuitively think it should. A good example is word wrapping, which is easy to tell when it "looks right" (at least to a trained eye), was done by hand by many when printing was done more manually, but turns out to be difficult to assign a metric that handles all use cases, especially when you're trying to be computationally efficient.
Web layout is like a whole set of word wrapping requirements, expected to get along and paint a page in real time. The process that birthed CSS is nowhere near what you'd turn to if you wanted to develop a cohesive styling whole, but it's how history usually plays out. If it's any consolation, I personally don't think there's a comprehensive theory of everything for styling anyways, so there are always going to be aspects that need to be learned, not inferred.
In any case, flexbox is pretty straightforward if you spend an afternoon with it, just a constraint-based layout system that maps pretty well to how you would describe a layout like that.
Re: The complete guide to centering a div
#77Earlier quoted context omitted.
Next week: The complete guide to sticky footers! It's unbelievable just how annoying CSS can be for seemingly simple things.
I may be using words incorrectly, and I'm not positive you can even make the distinction, and I am happy to stand corrected, but it always seemed to me that CSS was fine for style , but terrible for layout . So I think I'm agreeing with you.
> but it always seemed to me that CSS was fine for style, but terrible for layout.
I think you're right there. When I've set colours, fonts, etc in CSS it's always worked first time, but getting layout right it feels like I'm fighting against the system all the time.
I wonder if it wouldn't make sense to build a tool that abstracts out the layout part of CSS? I once built a tool in python that lays out Tk/Tkinter GUIs[1] which I may have a go at adapting to produce CSS/HTML output.
Re: The complete guide to centering a div
#78Earlier quoted context omitted.
Well no, the issue is that we're getting close to 20 years since CSS was introduced and they only got around to introducing something that makes this basic simple task 'easy'[1] relatively recently. It's not even like this was some basic part of CSS2 that got ignored by vendors, it became a candidate recommendation for CSS3 in 2012 . [1] It makes it 'easy' by introducing yet another weird box modelism that doesn't re…
I'm not sure what your point is. Web standards have had a turbulent history? Of course that's true. - CSS 2 was originally published as a recommendation in 1998. CSS 2.1 was pushed as a recommendation in 2011. Maybe something was wrong? - "Ignored by vendors" is a bit of an understatement, because your "close to 20 years" includes 5 years of the vendor with 90% marketshare not releasing anything at all. - FWIW, what…
> Maybe something was wrong?
Well yes, that is exactly my point. It's not like the desire to center things vertically came about a mere 5 years ago, it was a thing that people were doing in 1996 when CSS was first propagated.
I don't really get your point. You seem to be arguing that people shouldn't have been frustrated for the last 17 years by CSS' inability to do basic and non-novel tasks simply because it's starting to become possible now.
Re: The complete guide to centering a div
#79Earlier quoted context omitted.
Next week: The complete guide to sticky footers! It's unbelievable just how annoying CSS can be for seemingly simple things.
I may be using words incorrectly, and I'm not positive you can even make the distinction, and I am happy to stand corrected, but it always seemed to me that CSS was fine for style , but terrible for layout . So I think I'm agreeing with you.
I think the issue, in terms of CSS being bad for layout, is that it tries to treat the logical structure of the document as the layout structure. If there were a way to restructure the document and then apply CSS to it a lot of things would get a lot easier and separation of content and presentation could be more realistic.
XSLT was interesting in providing some of this kind of restructuring power, but was far too heavyweight for pure layout manipulation.
Of course, this is also what flexbox tries to do and I think we'll be groaning about its lack of relative power in this area in the future when it's more established. It feels like a bandaid to me.
Re: The complete guide to centering a div
#80Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?
Next week: The complete guide to sticky footers! It's unbelievable just how annoying CSS can be for seemingly simple things.
This is as close as I can get without HTML tables:
Testing making a footer with CSS
This is the content area.
This is the footer.