CSS竖直居中

一、基础知识

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%;
}

以上代码实现了图片垂直居中效果。

三、总结

以上三种应用场景涵盖了大部分的竖直居中需求场景，只需要结合实际需求进行简单的调整即可。总之，了解好基础知识，应用起来就会得心应手。