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

How to Center in CSS (2015)

howtocenterincss.com

Post reply on HN
Print view View original

1–10 of 74 posts

Re: How to Center in CSS (2015)

#2

Post by _bxg1 »

This is a straw man.

Today you can simply use flexbox on the container:

  display: flex;
  justify-content: center; // horizontal
  align-items: center; // vertical
Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

Re: How to Center in CSS (2015)

#4

Post by petepete »

_bxg1 wrote: post #2

This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

Flexbox (and grid) have made frontend work tolerable again for me. You can do in a handful of lines what used to take all kinds of jiggerypokery, hacks and extra markup to wrap things.

Re: How to Center in CSS (2015)

#5

Post by account42 »

_bxg1 wrote: post #2

This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

That is exactly the code the website will generate if you select no IE support.

Re: How to Center in CSS (2015)

#6

Post by njsubedi »

_bxg1 wrote: post #2

This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

Yes, with flex we don't need anything else. If flex is not available, the browser is supposedly too old to care if we used tables for layout so I'll just throw in `display: table-cell`.

Re: How to Center in CSS (2015)

#8

Post by [deleted] »

_bxg1 wrote: post #2

This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

[deleted]

Re: How to Center in CSS (2015)

#9

Post by _bxg1 »

account42 wrote: post #5
_bxg1 wrote: post #2

This is a straw man. Today you can simply use flexbox on the container: display: flex; justify-content: center; // horizontal align-items: center; // vertical Doesn't work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

That is exactly the code the website will generate if you select no IE support.

Yet it opens with this misleading blurb:

> Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors.

Which is no longer true in the great majority of cases.

Re: How to Center in CSS (2015)

#10

Post by mattwad »

ChrisMarshallNY wrote: post #7

Here's what I've been doing for years (The can be any element, like ): WFM YMMV

you really use the same id twice on a page?! Heresey! Also.. I do the same (essentially: margin: 0 auto) but it works with display: block too, and you don't need text-align center on the parent.
Post reply on HN