div如何水平居中与垂直居中？css/html
在web前端开发中经常需要使用到让div进行水平和垂直居中的技术。
现在我们就来谈谈如何实现让div水平和垂直居中。
操作方法
- 01
先看下初始化代码，此时div没有水平和垂直居中 <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div style="border:1px red solid;width:500px;height:500px;"> </div> </body> </html>
- 02
运行结果如下
- 03
我们来实现让div水平居中 让div实现水平居中的最佳方式是设置margin为auto(自动)，或者仅仅设置margin-left与margin-right自动。 代码如下： margin:auto;
- 04
运行结果如下
- 05
然后我们来设置让div垂直居中。 垂直居中也可以通过设置margin方式实现。不过不能设置为auto，要设置上下margin的具体的百分比或者具体的像素值。不过这个只能根据你的实际情况来设置，我这里只需要设置margin-top为5%就可以了 代码如下 margin-top:5%;
- 06
运行结果如下
- 07
还有几种垂直居中方法 1. 垂直居中也可以通过设置div的父元素的padding方式实现 我这里设置的padding-top:5%; 代码如下：
- 08
运行结果如下
其他几种垂直居中的思路
- 01
1. 可以通过相对定位实现div垂直居中 2. 可以通过绝对定位实现div垂直居中 3. 可以设置div父元素的行高等于其本身高度实现垂直居中 以上思路都是清测可行的，
赞 (0)