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

以上代碼實現了圖片垂直居中效果。

三、總結

以上三種應用場景涵蓋了大部分的豎直居中需求場景，只需要結合實際需求進行簡單的調整即可。總之，了解好基礎知識，應用起來就會得心應手。