水平垂直居中
作为一道面试必考题,水平垂直居中多次登上热搜,热度一直不减,作为吃瓜群众,这种大瓜你们确定不过来蹭一波热度吗?
话不多说,直接上瓜
1、为什么要水平垂直居中
中国文化讲究对称,大到帝王的宫殿,小至老百姓的门户、装束,都讲究左右对称,也就是对称美,水平垂直居中作为对称中的对称,美的是一塌糊涂。这么美的东西你确定不学吗?所以学会它就Vans了。
2、水平垂直居中实现方法
以下是经常使用的水平垂直居中的方案:
方案编号 | 具体实现方案 |
---|---|
01 | flex弹性布局 |
02 | 子绝父相+left+top |
03 | 子绝父相+left+top+right+bottom+margin |
04 | grid网格布局 |
05 | table-cell |
2.1、方案01-flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
将父元素设置为flex容器,然后将其水平方向和竖直方向上的排列方式设置为center。
使用flex容器的属性即可实现水平垂直居中,具体实现代码如下:
<!--html代码如下,后续此部分代码将不再重复-->
<div class="outer">
<div class="inner"></div>
</div>
/*css部分代码,此部分代码为公共代码,后续此部分将不再重复*/
.outer{
width: 500px;
height: 500px;
background-color: skyblue;
margin: 100px auto;
}
.inner{
width: 200px;
height: 200px;
background-color: #31c27c;
}
flex方案实现代码:
.outer{
/*flex代码*/
display: flex;
align-items: center;
justify-content: center;
}
优点:不需要知道子元素的宽高,代码简洁
缺点:兼容性问题,移动端可以很好的兼容,PC端可能会有兼容问题
2.2、方案02-子绝父相+left+top
子绝父相:子元素绝对定位,父元素相对定位。
然后根据其left,top再调整其位置
使用子绝父相可实现水平垂直居中,具体实现代码如下:
02方案实现代码:
.outer{
position: relative;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
/*margin负值 为自身宽度的一半*/
margin-left: -100px;
margin-top: -100px;
}
优点:兼容性好,代码简洁
缺点:需要知道子元素的宽高
2.3、方案02-子绝父相+left+top
子绝父相:子元素绝对定位,父元素相对定位。
然后根据其left,top再调整其位置
使用子绝父相可实现水平垂直居中,具体实现代码如下:
02方案实现代码:
.outer{
position: relative;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
/*使用CSS3的transform特性*/
transform: translate(-50%,-50%);
}
优点:代码简洁,不需要知道子元素的宽高
2.4、方案02-子绝父相+left+top
子绝父相:子元素绝对定位,父元素相对定位。
然后根据其left,top再调整其位置
使用子绝父相可实现水平垂直居中,具体实现代码如下:
02方案实现代码:
.outer{
position: relative;
}
.inner{
position: absolute;
/*使用CSS3的计算特性,这个减号两边一定要有空格,否则会有语义错误,不能达到想要的效果*/
left: calc(50% - 100px);
top: calc(50% - 100px);
}
优点:代码简洁
缺点:可能会有兼容性问题,需要知道子元素的宽高
2.5、方案03-子绝父相+left+top+bottom+right+margin:auto
子绝父相:子元素绝对定位,父元素相对定位。
然后子元素left,top,bottom,right都设置为0,margin设置为auto再移动
使用子绝父相可实现水平垂直居中,具体实现代码如下:
03方案实现代码:
.outer{
position: relative;
}
.inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
居中的原理:
left + margin-left + border-left + padding-left + width + padding-right +border-right +margin-right +right = 包含块
width为定值,padding, border默认为0/none,left、right为0,那么margin-left和margin-right为auto,则平分剩余空间,居中。
垂直居中同理
优点:兼容性好,代码简洁
2.6、方案04-grid网格布局
网格布局(Grid)是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
上图就是网格布局的例子,如果对网格布局感兴趣,可以去阮一峰大牛的日志上看一波。下面附上链接
阮一峰的网络日志—网格布局
使用网格布局可以实现水平垂直居中,具体实现代码如下:
04方案实现代码:
.outer{
display: grid;
}
.inner{
align-self: center;
justify-self: center;
}
优点:代码简洁,不需要知道子元素宽高
缺点:可能会有兼容性问题
2.7、方案05-CSS的table
display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。
使用子绝父相可实现水平垂直居中,具体实现代码如下:
02方案实现代码:
.outer{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner{
display: inline-block;
}
优点:代码简洁
缺点:可能会有兼容性问题