元素居中在網頁中是布局中常用的技術。我們可以通過 CSS 樣式去控制元素的居中方式。下面我們來具體了解一下。

// 居中元素
.center {
position: absolute;// 絕對定位
top: 50%;
left: 50%;
transform: translate(-50%, -50%);// 移動
}
// 居中塊狀元素
.block-center {
margin: auto;
}
// 居中文字
.text-center {
text-align: center;
}

第一個代碼段，通過絕對定位和 translate 移動來將元素居中，需要注意的是這里的元素是絕對定位的，也就是說需要設置其父元素為相對定位。

第二個代碼段，通過 margin:auto 屬性來將塊狀元素左右居中。需要注意的是這里的塊狀元素需要設置固定寬度。如果寬度為 auto（自適應），則無法實現居中效果。

第三個代碼段，通過 text-align:center 屬性來將文字水平居中。需要注意的是這里的居中方式只是水平居中，如果需要實現垂直居中，需要根據具體情況進行另外的處理。