CSS可以实现元素的水平居中和垂直居中，但垂直居中相对于水平居中稍微有些麻烦。在本文中，我会从几个角度来阐述如何使用CSS实现元素竖直居中。
一、使用display:flex
CSS3中的flex布局非常方便，可以通过一些简单的设置轻松实现元素的竖直居中。通过设置包裹元素的display属性为flex，并且设置子元素的align-items属性为center，就可以实现子元素的竖直居中。
<div class="wrapper">
<div class="centered">我被居中了</div>
</div>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
background: #f1f1f1;
}
.centered {
text-align: center;
font-size: 48px;
}
二、使用position和transform
另一种方式是使用position和transform属性来实现竖直居中。通过设置元素的position属性为absolute，并且设置top和left属性为50%，再使用transform:translate来将元素向上移动自身高度的一半，就可以实现元素的竖直居中。
<div class="wrapper">
<div class="centered">我被居中了</div>
</div>
.wrapper {
position: relative;
width: 100%;
height: 200px;
background: #f1f1f1;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 48px;
}
三、使用display:table和display:table-cell
最后一种方式是使用display:table和display:table-cell属性来实现竖直居中。通过将包裹元素设置display:table，在内部元素设置display:table-cell和vertical-align:center，就可以实现元素的竖直居中。
<div class="wrapper">
<div class="centered">我被居中了</div>
</div>
.wrapper {
display: table;
width: 100%;
height: 200px;
background: #f1f1f1;
}
.centered {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
这三种方式都可以实现元素的竖直居中，具体使用哪一种方式可以根据不同情况进行选择。其中，flex布局是CSS3新特性，需要考虑兼容性问题；position和transform方式不需要使用额外的标签；display:table和display:table-cell的方式比较老旧。总的来说，使用flex布局是比较推荐的方式。
在实际的开发中，元素的竖直居中是非常常见的需求，掌握几种方法可以更轻松地完成工作。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/200618.html
微信扫一扫 
支付宝扫一扫 