CSS代碼最常見的需求之一就是要讓元素居中。下面的代碼展示了如何讓一個div水平和垂直居中。

div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這段代碼的解釋:

• position: absolute;使元素脫離文檔流
• top: 50%;和left: 50%;將元素移動到父元素的中心
• transform: translate(-50%, -50%);將元素向左和向上移動50%，使其在水平和垂直方向上居中

這里有一個例子，展示了如何用這段代碼實現一個居中的標題：

<div class="center-title">
<h1>Hello World</h1>
</div>
.center-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這段代碼和上面的代碼非常相似。唯一的不同是我們給一個div加了一個類名，并在這個div中包裹了標題。這樣我們可以更方便地樣式化它們。