在web開發中，居中是非常常見的需求，這篇文章將帶領大家學習如何使用CSS將元素垂直居中、水平居中或同時垂直水平居中。

/* 水平居中 */
div {
width: 200px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* 垂直居中 */
div {
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 水平垂直居中 */
div {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代碼中，div為我們需要居中的元素，下面分別介紹一下三種方式的實現原理。

首先是水平居中，我們將元素的寬度設置為一個固定的寬度，并且給元素的position屬性設置為relative，然后將元素向左偏移50%，再使用transform屬性的translateX()方法將元素向左移動其自身寬度一半的距離，代碼如下：

div {
width: 200px;
position: relative;
left: 50%;
transform: translateX(-50%);
}

接下來是垂直居中，我們將元素的高度設置為一個固定的高度，并且給元素的position屬性設置為relative，然后將元素向上偏移50%，再使用transform屬性的translateY()方法將元素向上移動其自身高度一半的距離，代碼如下：

div {
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
}

最后是同時垂直水平居中，我們將元素的寬度和高度都設置為一個固定值，給元素的position屬性設置為absolute，并將元素的左邊緣和上邊緣同時偏移50%，使用transform屬性的translate()方法同時移動元素，其中第一個參數表示向左移動元素的寬度一半的距離，第二個參數表示向上移動元素的高度一半的距離，代碼如下：

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

以上三種方式中，相同的點就是都使用了transform屬性，并且都是將元素向相對于它的父級元素的中心位置移動。看到這里，你已經掌握了CSS中的元素居中技巧了嗎？趕緊試試吧！