在网页制作过程中，有时候需要让一个div居中显示。下面介绍一些常用的居中方式。

一、水平居中

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

上面代码中的“margin: 0 auto;”表示让左右两边的margin都自动计算，可以使div在父元素中水平居中。

二、垂直居中

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

上面代码中的“position: absolute;”表示将div元素的定位方式设置为“绝对定位”。“top: 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居中的常用方法。