首页 > 代码库 > CSS垂直和水平居中

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属性拉伸了

(块级元素同理)

 

CSS垂直和水平居中