使用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，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。
更多信息
根据第一非静态父元素被定位（position:relative，absolute，或fixed）。在这个小提琴和本文档主题中探索更多内容。
对于仅水平居中，请使用left:50%和transform:translateX(-50%)。仅垂直居中也是如此：用top:50%和居中transform:translateY(-50%)。
在此定心方法中使用非静态的宽度/高度元素会导致居中的元素看上去变形。这主要发生在包含文本的元素上，可以通过添加margin-right:-50%;和来解决margin-bottom:-50%;。查看此小提琴以获取更多信息。