CSS在实际开发中或者在面试的时候,都是一个绕不开的话题。而关于css经典问题“垂直居中”更是经常霸榜的存在。往往最容易的可能最容易忽略,本次分享多钟垂直居中的方案。
垂直居中分为俩种,一种是元素宽、高已知;一种是元素宽、高未知
一、宽高已知
1、absolute + margin auto
利用当前元素的 position: absolute;
和 margin: auto。
将当前元素的绝对定位值都设置为 0,将 margin
设置为 auto
,就可以实现元素的垂直居中。
.divBox{
position: relative;
width: 100px;
height: 100px;
}
.item{
width: 50px;
height: 50px;
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
2、absolute + 负 margin
当前元素元素相对父元素绝对定位 50% ,然后再使用margin-left和margin-top负值来调整位置,达到实现效果
.divBox{
position: relative;
width: 100px;
height: 100px;
}
.item{
width: 50px;
height: 50px;
position:absolute;
top: 50%; left: 50%;
margin-left: -25px;
margin-top: -25px;
}
3、absolute + calc
calc是css3的新增特性,用来计算相关数值。
.divBox{
position: relative;
width: 100px;
height: 100px;
}
.item{
width: 50px;
height: 50px;
position:absolute;
top: 50%; left: 50%;
margin-left: calc(50% - 25px);
margin-top: calc(50% - 25px);
}
二、元素宽高未知
1、absolute + transform
利用css3的新特性 transform,来移动定位元素。
.divBox{
position: relative;
width: 100px;
height: 100px;
}
.item{
width: 50px;
height: 50px;
position:absolute;
top: 50%; left: 50%;
transform: translate(50%, 50%);
}
2、line-height + vertical-align
设置当前元素为行内元素,设置父元素的 text-align: center;
实现水平居中
设置当前元素的 vertical-align: middle;
来实现垂直居中;
最后设置当前元素的 line-height: initial;
来继承父元素的line-height
。
.divBox{
width: 100px;
line-height: 100px;
text-align: center;
}
.item{
display: inline-block;
vertical-align: middle;
line-height: initial;
}
3、table 表格元素
<table>
<tbody>
<tr>
<td class="divBox">
<div class="item"></div>
</td>
</tr>
</tbody>
</table>
<style>
.divBox{
width: 100px;
height: 100px;
text-align: center;
}
.item{
display: inline-block;
}
4、flex 布局
justify-content设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式
align-items定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式
.divBox{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.item{
background: orange;
}
5、flex + margin auto
.divBox{
width: 100px;
height: 100px;
display: flex;
}
.item{
margin: auto;
}
还有一种是display:grid的布局方式,但是没有在项目中使用过,这里不在过多的叙述。感兴趣的可以阅读下此篇文章,链接附上CSS3中的display:grid,网格布局介绍_CSS教程-考高分网
本次分享完成~