步驟1:

line-height方式

<style>
#d {
line-height: 100px;
}
div{
  border:solid 1px lightskyblue;
}
</style>
 
<div id="d">line-height 適合單獨一行垂直居中</div>

步驟2:

內邊距方式

藉助設定相同的上下內邊距，實現垂直居中效果，可以用在多行文字上

<style>
#d {
    padding: 30 0;
}
div{
    border:solid 1px lightskyblue;
}
</style
 
>
 
<div id="d">多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容  </div>

步驟3:

table方式

首先通過display: table-cell;把div用單元格的形式顯示，然後借用單元格的垂直居中vertical-align: middle;來達到效果。

<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
 
div{
  border:solid 1px lightskyblue;
}
</style>
  
<div id="d">
<img src="https://how2j.cn/example.gif">
</div>