div如何水平居中与垂直居中？css/html

div如何水平居中与垂直居中？css/html

在web前端开发中经常需要使用到让div进行水平和垂直居中的技术。

现在我们就来谈谈如何实现让div水平和垂直居中。

先看下初始化代码，此时div没有水平和垂直居中

运行结果如下

我们来实现让div水平居中

让div实现水平居中的最佳方式是设置margin为auto(自动)，或者仅仅设置margin-left与margin-right自动。

代码如下：

margin:auto;

运行结果如下

然后我们来设置让div垂直居中。

垂直居中也可以通过设置margin方式实现。不过不能设置为auto，要设置上下margin的具体的百分比或者具体的像素值。不过这个只能根据你的实际情况来设置，我这里只需要设置margin-top为5%就可以了

代码如下

margin-top:5%;

运行结果如下

还有几种垂直居中方法

1. 垂直居中也可以通过设置div的父元素的padding方式实现

我这里设置的padding-top:5%;

代码如下：

运行结果如下

1.可以通过相对定位实现div垂直居中

2.可以通过绝对定位实现div垂直居中

3.可以设置div父元素的行高等于其本身高度实现垂直居中

以上思路都是清测可行的，