How to Center in CSS

If OP is the creator of the site, the width and height boxes are really small on firefox desktop. I'm thinking at least show 3 characters wide, even four would be smart.

Re: How to Center in CSS

#5

Post by yefim » Sun, Apr 19, 2015, 11:43 PM UTC

Finally! I can't believe this is still such a big problem in CSS today.

Re: How to Center in CSS

#6

Post by picardo » Sun, Apr 19, 2015, 11:47 PM UTC

This might need some updating. I did a quick run through and it recommended me to use a table-cell for vertical centering. You might be able to do that more easily with flexbox.

Re: How to Center in CSS

#7

Post by tomasien » Sun, Apr 19, 2015, 11:51 PM UTC

I remember when I was first learning CSS and I found out this wasn't easy. I thought "oh my god, this learning to code stuff is gonna be HARD!"

A few years later and I don't think anything but the occasional third party api with undocumented behavior has been nearly as hard.

Re: How to Center in CSS

#8

Post by lucaspottersky » Sun, Apr 19, 2015, 11:51 PM UTC

oh man, that's a mad world we live in. look at that.

it's just sad to think that a browser can do so much stuff, yet it's unable to provide a good layout system.

Re: How to Center in CSS

#9

Post by pcwalton » Sun, Apr 19, 2015, 11:54 PM UTC

This site doesn't seem to be suggesting absolute centering [1] when it would be the easiest way to center things.

"margin: auto" seems to be the way that the designers of CSS 2.1 intended to center things. 90% of the time, absolute centering is the easiest way to center in CSS; you should prefer it when possible.

[1]: http://codepen.io/shshaw/full/gEiDt

Re: How to Center in CSS

#10

Post by mhink » Sun, Apr 19, 2015, 11:54 PM UTC

Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center" and "align-items: center" seem to work unreasonably well for this exact purpose.