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

CSS垂直和水平居中

2024-09-10 14:48:44   219人阅读

在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垂直和水平居中


联系
我们