居中分为垂直居中和水平居中,这里因为水平居中比较简单就不过多说了,然后垂直居中呢又分为以下几种情况种情况:1、单行居中 这个也简单直接line-height为容器的高度就行了。2、多行居中 和上面的单行居中差不多,只是line-height的值发生了变化,用容器高度除以行数, ...
居中分为垂直居中和水平居中,这里因为水平居中比较简单就不过多说了,然后垂直居中呢又分为以下几种情况种情况:
1、单行居中
这个也简单直接line-height为容器的高度就行了。
2、多行居中
和上面的单行居中差不多,只是line-height的值发生了变化,用容器高度除以行数,得到的结果就是line-height的值。
3、DIV垂直居中。这个也分为两种情况
3.1、DIV知道高度的情况,这里就需要用到定位,下面是具体代码。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; } div{ width: 100%; height: 400px; position: absolute; top: 50%; left: 0; margin-top: -200px; background: red; } .box{ width: 100%; height: 380px; margin-top: -180px; background: black; } </style></head><body> <div> <div class="box"></div> </div></body></html>
原标题:关于的垂直居中的问题
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。