以CSS变换或Flexbox为中心，这是更好支持的

Question

以CSS转换为中心

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

vs以这样的flexbox为中心

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

哪一个更好地支持哪一个，哪一个更好，建议？

Answer 1

苹果和橙子。absolute从页面流中删除元素，而flex不这样做。这可能对您有或不起作用。transform比FLEX具有更好的浏览器支持，但是FLEX得到了广泛支持(目前〜97％的浏览器支持(。浏览器支持是我将absolute与transform一起使用flex的唯一原因。

您也可以使用display: table-cell; text-align: center; vertical-align: middle;并做同样的事情，并且比以前的任何一种技术都具有更好的支持。http://caniuse.com/#feat=css-table

使用哪个适合您的要求。

Answer 2

我自己使用flexbox。居中只是它可以做的第一件事。有关更多选项，请参见W3Schools：逆转，包装，间距等。为了验证对任何CSS的支持，caniuse.com是一个很好的资源。