Question

使用它来使元素居中：

.class {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

在我以前添加固定的宽度和高度并使用负边距来使元素居中之前，这样做并不需要固定的宽度或高度。

.class {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

转换浏览器支持：http://caniuse.com/#feat=transforms2d

Answer 1

转换技巧适用于较新的浏览器，但您的第二种方法适用于较早的浏览器，如ie7。因此，如果您希望您的网站仅用于较新的浏览器，那么您可以选择转换，但如果您需要支持较旧的浏览器，那么您可以使用第二个代码选项。

Answer 2

如果您不知道要尝试居中的对象的宽度和高度，请使用变换。否则你可以使用你喜欢的（请记住已经提到的浏览器支持）

Answer 3

我可能猜测转换是更多的资源消耗技术。我不确定，但如果有可能，我更喜欢第二种选择。

使用css变换进行定位会更好吗？

3 个答案: