以CSS Transform或Flexbox为中心，哪个更好地支持? [英] Centering with CSS Transform or Flexbox which one is better supported?

问题描述

以这样的CSS转换为中心

Centering with CSS transform like this

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

VS 像这样以Flexbox为中心

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?

推荐答案

苹果和橘子. absolute从页面流中删除一个元素，而flex则不这样做.这可能对您不起作用. transform具有比flex更好的浏览器支持，但是flex被广泛支持(目前约有97％的浏览器支持).浏览器支持是我在flex上将absolute与transform结合使用的唯一原因.

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.

您还可以使用display: table-cell; text-align: center; vertical-align: middle;并执行相同的操作，并且它比以前的任何一种技术都具有更好的支持. http://caniuse.com/#feat=css-table

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.

这篇关于以CSS Transform或Flexbox为中心，哪个更好地支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！