在網頁制作過程中，有時候需要讓一個div居中顯示。下面介紹一些常用的居中方式。

一、水平居中

div {
width: 300px;
margin: 0 auto;
}

上面代碼中的“margin: 0 auto;”表示讓左右兩邊的margin都自動計算，可以使div在父元素中水平居中。

二、垂直居中

div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

上面代碼中的“position: absolute;”表示將div元素的定位方式設置為“絕對定位”?！皌op: 50%;”表示讓div元素距離頂部的距離為父元素高度的50%。而“transform: translateY(-50%);”表示讓div元素的垂直方向偏移量為自身高度的一半的負值，即垂直居中。

三、水平垂直居中

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

上面代碼中的“position: absolute;”、“top: 50%;”、“left: 50%;”與二中相同。而“transform: translate(-50%, -50%);”表示讓div元素的水平方向偏移量為自身寬度的一半的負值，垂直方向偏移量為自身高度的一半的負值，即水平垂直居中。

以上就是css中div居中的常用方法。