html - 以 CSS Transform 或 Flexbox 为中心，哪一个更受支持？

Question

像这样用 CSS 变换居中

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

对比像这样使用 Flexbox 居中

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

哪一个得到更好的支持，哪一个更好、更可取？

Answer 1

苹果和橙子。 absolute 从页面流中删除一个元素，而 flex 不会那样做。这可能对你有用，也可能不适合你。 transform 比 flex 有更好的浏览器支持，但是 flex 得到了相当广泛的支持(目前约 97% 的浏览器支持)。浏览器支持是我使用 absolute 和 transform 而不是 flex 的唯一原因。

你也可以使用display: table-cell;文本对齐:居中； vertical-align: middle; 并做同样的事情，它比之前的任何一种技术都有更好的支持。 http://caniuse.com/#feat=css-table

使用满足您要求的任何一个。