CSS DIV文字如何垂直居中？这里写其中的两种方法！

方法一

CSS代码

.container{
  white-space:nowrap;height:400px;
}
.container :after{
  display:inline-block;content:'';height:100%;width:0%;overflow:hidden;vertical-align:middle;
}
.content{
  display:inline-block;vertical-align:middle;white-space:normal;
}

HTML代码

<div class="container">
  <div class="content">我是垂直居中的内容</div>
</div>

方法二

CSS代码

.container{
  height:400px;width:400px;display:table;
}
.content{
  display:table-cell;vertical-align:middle;
}

HTML代码

<div class="container">
  <div class="content">我是垂直居中的内容</div>
</div>

第一种方法代码看起来虽多，但有时比第二种方法好用。以上两种方法各有用途，关键看你的需求