一、基础知识
CSS竖直居中是指在一个容器内，把其中的元素在垂直方向上居中对齐。要实现该效果，首先需要了解以下两个属性：
display：flex
<div class="container">
<div class="box">元素1</div>
<div class="box">元素2</div>
<div class="box">元素3</div>
</div>
.container{
display: flex;
}以上代码可以将.container内的元素水平排列，即每个元素水平平均分布。
align-items:center
.container{
display: flex;
align-items: center;
}以上代码让.container内的元素在垂直方向上居中对齐。
二、应用场景
1、单行文本居中
在一个固定宽度的容器内，让单行文本水平垂直居中，代码如下：
<div class="container">
<div class="box">这是一行居中文本</div>
</div>
.container{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.box{
border: 1px solid #000;
}以上代码实现了单行文本居中效果。
2、多行文本居中
在一个固定宽度的容器内，让多行文本水平垂直居中，代码如下：
<div class="container">
<div class="box">这是一行居中文本<br/>这是第二行居中文本</div>
</div>
.container{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
}
.box{
border: 1px solid #000;
text-align: center;
width:100%;
}
.box br{
display:none;
content:"";
margin:0;
padding:0;
height:0;
}以上代码实现了多行文本居中效果。
3、图片垂直居中
在一个固定高度的容器内，让图片水平垂直居中，代码如下：
<div class="container">
<img src="图片地址">
</div>
.container{
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box img{
max-width: 100%;
max-height: 100%;
}以上代码实现了图片垂直居中效果。
三、总结
以上三种应用场景涵盖了大部分的竖直居中需求场景，只需要结合实际需求进行简单的调整即可。总之，了解好基础知识，应用起来就会得心应手。
原创文章，作者：AQJTU，如若转载，请注明出处：https://www.506064.com/n/361226.html
微信扫一扫 
支付宝扫一扫 