CSS垂直和水平居中
在css中,居中使用十分频繁。
居中分为水平和垂直居中
水平居中十分简单:
body{ background:#f90; }
body统一为这个颜色
div { margin:0 auto; background:green; width:10em; text-align:center; }
<div> hello world </div>
注意width是必须设定的,否则如果是块级元素(div)则会占用一行,没有什么居中可言,如果是行内元素(span)则会不起作用,也无居中可言
效果:
关于垂直居中,这个就有意思了,虽然使用不像水平那么多,但是要用到的时候确实比水平的复杂多了,根据《css权威指南》中代码(有改动):
这是行内元素:
b{ position:absolute; left:0; right:0; top:0; bottom:0; height: 5em; margin:auto 0; background:silver; }
<b>hello world</b>
效果:
注意到:灰色部分垂直居中了
经过分析,其中这几行是必备:
position: absolute;
top: 0;
bottom: 0;
height: 5em;
margin: auto 0;
首先元素必须为absolute,然后top,bottom同时设置为0,让元素既无法停靠在上边界,也无法停靠在下边界
另外注意:这里实现的垂直居中效果其实是用户代理(浏览器)补全margin实现的,也就是,因为,top,bottom都为0,而元素height只有5em,浏览器就自己补全了剩下的空白,是margin-top,margin-bottom填充了上下
然后与水平居中对应,垂直居中是height必备,否则会是这样的:
元素被top和bottom两个css属性拉伸了
(块级元素同理)
注意:
由于垂直居中使用到了absolute的定位,所以,其他元素将被覆盖: