以固定尺寸居中

如果你的内容大小是固定的，你可以使用 margin 将绝对定位设置为 50％，这样可以减少内容宽度和高度的一半：

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

水平定心，只有固定宽度

即使你不知道内容的高度，也可以将元素水平居中：

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

垂直定心，固定高度

如果你知道元素的高度，则可以垂直居中元素：

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}