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

How to Center in CSS

howtocenterincss.com

Post reply on HN
Print view View original

31–40 of 297 posts

Re: How to Center in CSS

#31

Post by pcwalton »

ChrisGaudreau wrote: post #22
pcwalton wrote: post #9

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

Would this technique work to center, say, an tag with undeclared dimensions inside of a div? Or do you have to jump through hoops?

No, if you don't have a defined height you will need to either use "display: table", the table-cell technique, or flexbox. When I told the site that I had a defined height, however, it still suggested the table-cell trick, which was not the optimal solution because of the extra markup required.

In my experience, most of the time when I do want to center something vertically, I have a defined height (which can be a percentage!), so absolute centering is the solution of choice.

Re: How to Center in CSS

#33

Post by [deleted] »

chubs wrote: post #13

Wow CSS is unfriendly, you really realise how poor it is once you learn other layout systems (android's XML and iOS auto layout, etc). Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.

[deleted]

Re: How to Center in CSS

#36

Post by jimmcslim »

DiThi wrote: post #27

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox

I've understood that Flexbox is what you should use for 'small layout' (controls, etc) but ultimately we should be using the new CSS grid module for 'large layout' (pages).

http://dev.w3.org/csswg/css-grid/

Of course, it might be a while until there is broad browser support!

http://caniuse.com/#feat=css-grid

Re: How to Center in CSS

#37

Post by lnanek2 »

DiThi wrote: post #27

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox

Hmm, that http://flexboxin5.com/ site didn't work in Chrome at all. Claimed it was going to resize when I pressed resize it early on and did nothing.

Re: How to Center in CSS

#38

Post by lisper »

The mere fact that a site like this can exist and not be a joke is proof that CSS is still badly broken. I should be able to center things by writing:

    foo {
      align: center;
      valign: center;
    }

Re: How to Center in CSS

#39

Post by phamilton »

lnanek2 wrote: post #37
DiThi wrote: post #27

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox

Hmm, that http://flexboxin5.com/ site didn't work in Chrome at all. Claimed it was going to resize when I pressed resize it early on and did nothing.

Same. Debug console:

main.js:769 made it this far

main.js:1182 nope, not happenin today sir.

Re: How to Center in CSS

#40

Post by undefined0 »

ChrisGaudreau wrote: post #22
pcwalton wrote: post #9

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

Would this technique work to center, say, an tag with undeclared dimensions inside of a div? Or do you have to jump through hoops?

An image can be vertically aligned with vertical-align: middle; and centered with text-align: center;

Firefox uses pcwaltons method for images (resource://gre/res/TopLevelImageDocument.css). Do you want the image to be in the center/vertical of the div (with the div having a specified height)? If so, then pcwaltons method should work, as long as you have position:relative; on the div.

Post reply on HN