以固定尺寸居中

如果你的內容大小是固定的，你可以使用 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 */
}