使用CSS转换

2024-04-14 04:15:03 366

示例

CSS转换基于元素的大小，因此，如果您不知道元素的高度或宽度，则可以将其绝对定位在相对容器的顶部和左侧的50％位置，并将其左右平移50％将其垂直和水平居中。

请记住，使用此技术时，元素可能会在非整数像素边界处结束渲染，从而使其看起来模糊。解决方法请参见SO中的此答案。

的HTML

<div class="container">
  <div class="element"></div>
</div>

的CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在JSFiddle中查看示例

跨浏览器兼容性

转换属性需要旧浏览器支持的前缀。Chrome<=35，Safari<=8，Opera<=22，AndroidBrowser<=4.4.4和IE9需要前缀。IE8和更早版本不支持CSS转换。

这是上一个示例的常见转换声明：

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

有关更多信息，请参见canIuse。

使用CSS转换

示例

跨浏览器兼容性

更多信息

热门推荐

随机推荐