Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The complete guide to centering a div

tipue.com

Post reply on HN
Print view View original

21–30 of 170 posts

Re: The complete guide to centering a div

#21

Post by maj0rhn »

peter_l_downs wrote: post #10
maj0rhn wrote: post #5

This is a pointless post. Use the TABLE tag. Yes, it will violate the purity of CSS, but you can trust it, and it will make your day better because it will free you angst and from extensive cross-browser testing. Simple is better than complex. Straightforward is better than arcane.

As igvadaimon wrote below, there's no need for a tag. Instead of: my div you can do my div The inline styling is just for illustrative purposes, of course.

I'll admit that the table-cell approach is nice -- thank you. But how curious that the article, which purports to be an in-depth examination, doesn't mention it. And how curious that the table-cell approach has not turned up in the numerous times I've gone looking on-line for a robust, pure CSS solution. I've long harbored suspicions that many CSS gurus are too quick to adopt complex solutions.

Re: The complete guide to centering a div

#22

Post by markdown »

Mandatum wrote: post #17
hawkharris wrote: post #13

What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?

Then unfortunately you have to calculate it with JS if it varies. Vertically centering divs has always been a gigantic pain-in-the-ass. If anyone has a better idea for doing this without JS, please let me know. Once CSS implements variable-based elements (ie #div.height) then we'll have a lot more control.

> If anyone has a better idea for doing this without JS, please let me know.

Flexbox, with optional fallback to JS for IE 8 and 9. That said, vertical centering is almost always a nice-to-have rather than a must-have so personally I wouldn't even use a fallback.

http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

http://caniuse.com/flexbox

Re: The complete guide to centering a div

#23

Post by masklinn »

lpolovets wrote: post #16

I 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…

> I wonder if there's a good reason for the madness

Well the reason is that CSS originally wasn't intended for layout….

But since there was no other tool for layout, once the web design community decided to remove tables from layout it got drafted despite being severely insufficient. Layout modules have just started being developed, fought upon and implemented in the last few years. Here's how vertical centering looks like when using flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/vertic...):

    .parent {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .centered {
        max-width: 50%;
    }
(note: this ignores prefixing, specs differences and browser-specific issues, here's the component https://github.com/philipwalton/solved-by-flexbox/blob/maste... which is itself expanded to suit browsers)

Re: The complete guide to centering a div

#24

Post by tiziano88 »

bliker wrote: post #9

I was wondering why the demo is not working for me. it really took me a while to realize that it is actually a button.

damn, I thought that box was supposed to show the alignment of the div itself too, and I couldn't figure out why it looked always the same

Re: The complete guide to centering a div

#25

Post by michaelfdeberry »

maj0rhn wrote: post #21
peter_l_downs wrote: post #10

Earlier quoted context omitted.

As igvadaimon wrote below, there's no need for a tag. Instead of: my div you can do my div The inline styling is just for illustrative purposes, of course.

I'll admit that the table-cell approach is nice -- thank you. But how curious that the article, which purports to be an in-depth examination, doesn't mention it. And how curious that the table-cell approach has not turned up in the numerous times I've gone looking on-line for a robust, pure CSS solution. I've long harbored suspicions that many CSS gurus are too quick to adopt complex solutions.

I don't know the current state of browser's but the is likely because, at least at one time, the display type of table wasn't widely supported.

On the other hand support for centering vertically with auto isn't/wasn't widely supported either.

Re: The complete guide to centering a div

#26

Post by masklinn »

maj0rhn wrote: post #21
peter_l_downs wrote: post #10

Earlier quoted context omitted.

As igvadaimon wrote below, there's no need for a tag. Instead of: my div you can do my div The inline styling is just for illustrative purposes, of course.

I'll admit that the table-cell approach is nice -- thank you. But how curious that the article, which purports to be an in-depth examination, doesn't mention it. And how curious that the table-cell approach has not turned up in the numerous times I've gone looking on-line for a robust, pure CSS solution. I've long harbored suspicions that many CSS gurus are too quick to adopt complex solutions.

It doesn't mention flexbox[0] either. It's not an in-depth examination, it's blogspam. There are better[1] years-old[2] resources which are no more incomplete.

[0] http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

[1] http://css-tricks.com/centering-in-the-unknown/

[2] http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php

Re: The complete guide to centering a div

#27

Post by jessedhillon »

shawnz wrote: post #15

> 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

Re: The complete guide to centering a div

#28

Post by hamburglar »

lpolovets wrote: post #16

I 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 sad thing is that I'm going to bookmark this.

Re: The complete guide to centering a div

#29

Post by 10feet »

bliker wrote: post #9

I was wondering why the demo is not working for me. it really took me a while to realize that it is actually a button.

Obviously you can't show off css in the same browser window as your text, that would be insane. No, you have to load up a completely different website, that makes much more sense.

Re: The complete guide to centering a div

#30

Post by [deleted] »

Mandatum wrote: post #17
hawkharris wrote: post #13

What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?

Then unfortunately you have to calculate it with JS if it varies. Vertically centering divs has always been a gigantic pain-in-the-ass. If anyone has a better idea for doing this without JS, please let me know. Once CSS implements variable-based elements (ie #div.height) then we'll have a lot more control.

[deleted]
Post reply on HN