"
1. 实现DIV水平居中
设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。
1 div{
2 Width</span>: 100px;
3 Height</span>: 100px;
4 margin: 0 auto;
5 }
缺点:需要设置div的宽度
2. //代码效果参考:https://v.youku.com/v_show/id_XNjQwMDQwNjkxMg==.html
实现DIV水平、垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDQxMTQ2MA==.html
50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。1 div{
2 Width</span>: 100px;
3 Height</span>: 100px;
4 position: absolute;
5 left: 50%;
6 top: 50%;
7 margin: -50px 0 0 -50px;
8 }
缺点:需要设置position属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中
3. 文本在DIV中水平、垂直居中(text-align + line-height)
1)text-align 属性规定(块级)元素内文本的水平对齐方式。
2)line-height = height,行高等于元素高度,用来实现垂直居中。
1 div{
2 Width</span>:200px;Height</span>:200px; /设置div的大小/
3 border:1px solid green; /边框/
4 text-align: center; /文字水平居中对齐/
5 line-Height</span>: 200px; /设置文字行距等于div的高度/
6 overflow:hidden;
7 }
"