2

Centering with CSS transform like this

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

VS Centering with Flexbox like this

  display: flex;
  align-items: center;
  justify-content: center;

Which one is better supported and which one is better and advisable?

Johannes
  • 64,305
  • 18
  • 73
  • 130
Jay
  • 1,251
  • 1
  • 9
  • 12
  • CSS transform has better support, about which one, flexbox flows better, still, it depends on so many things...and is also primarily opinion-based – Asons Apr 24 '17 at 18:33
  • 1
    Apples and oranges. `absolute` removes an element from the flow of the page, and flex doesn't do that. That may or may not work for you. `transform` has better browser support than `flex`, but flex is pretty widely supported (~97% browser support at the moment). Use whichever one works for your requirements. – Michael Coker Apr 24 '17 at 18:34
  • 1
    @MichaelCoker Thanks man, you should put that as an answer. – Jay Apr 24 '17 at 21:24
  • @Jay roger that. Also put another solution in there. – Michael Coker Apr 24 '17 at 21:39

2 Answers2

1

Apples and oranges. absolute removes an element from the flow of the page, and flex doesn't do that. That may or may not work for you. transform has better browser support than flex, but flex is pretty widely supported (~97% browser support at the moment). Browser support is the only reason I would use absolute with transform over flex.

You can also use display: table-cell; text-align: center; vertical-align: middle; and do the same thing, and it has better support than either of the previous techniques. http://caniuse.com/#feat=css-table

Use whichever one works for your requirements.

Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

I use flexbox myself. Centering is just the first awesome thing it can do. See W3Schools for more options: reversing, wrapping, spacing, and more. To verify the support for any CSS, caniuse.com is an excellent resource.

Super Jade
  • 5,609
  • 7
  • 39
  • 61