操作方法
先看下初始化代码，此时div没有水平和垂直居中 <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div style="border:1px red solid;width:500px;height:500px;"> </div> </body> </html>
运行结果如下
我们来实现让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父元素的行高等于其本身高度实现垂直居中 以上思路都是清测可行的，