使用CSS转换

示例

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，Android Browser <= 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。

更多信息

• 根据第一非静态父元素被定位（position: relative，absolute，或fixed）。在这个小提琴和本文档主题中探索更多内容。

• 对于仅水平居中，请使用left: 50%和transform: translateX(-50%)。仅垂直居中也是如此：用top: 50%和居中transform: translateY(-50%)。

• 在此定心方法中使用非静态的宽度/高度元素会导致居中的元素看上去变形。这主要发生在包含文本的元素上，可以通过添加margin-right: -50%;和来解决margin-bottom: -50%;。查看此小提琴以获取更多信息。