<div id="box">
  <div id="child">我是测试DIV</div>
</div></pre>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 width: 150px; 
 height: 100px; 
 background: orange; 
 position: absolute; top: 50%; 
 margin: -50px 0 0 0; 
 line-height: 100px;
}

<div id="child"> 我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本 </div></pre>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 background: #93BC49; 
 position: absolute; 
 top: 50%; 
 transform: translate(0, -50%);
}

<div id="box">
  <div id="child">我也是个测试DIV</div>
</div></pre>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 width: 50%; 
 height: 30%; 
 background: pink; 
 position: absolute; 
 top: 50%; 
 margin: -15% 0 0 0;
}

<div id="box">
  <div id="child">呆呆今天退役了(。﹏。)</div>
</div></pre>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 position: relative;
} 
#child { 
 width: 200px; 
 height: 100px; 
 background: #A1CCFE; 
 position: absolute; top: 0; 
 bottom: 0; 
 margin: auto; 
 line-height: 100px;
}

<div id="box">
  <div id="child">今天西安的霾严重的吓人，刚看了一眼PM2.5是422</div>
</div>
css代码：
#box { 
 width: 300px; 
 background: #ddd; 
 padding: 100px 0;
} 
#child { 
 width: 200px; 
 height: 100px; 
 background: #F7A750; 
 line-height: 50px;
}

<div id="box">
  <div id="base"></div>
  <div id="child">今天写了第一篇博客，希望可以坚持写下去！
  </div>
</div>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd;
} 
#base { 
 height: 50%; 
 background: #AF9BD3;
} 
#child { 
 height: 100px; 
 background: rgba(131, 224, 245, 0.6); 
 line-height: 50px; 
 margin-top: -50px;
}

<div id="box">雾霾天气，太久没有打球了</div>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: flex; 
 align-items: center;
}

<div id="box">
  <div id="child"> 程序员怎么才能保护好眼睛？ </div>
</div>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: flex; 
 align-items: center;
}
#child { 
 width: 300px; 
 height: 100px; 
 background: #8194AA; 
 line-height: 100px;
}

<div id="box">
  <div id="child"> 答案当然是多用绿色的背景哈哈 </div>
</div>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: flex; 
 flex-direction: column; 
 justify-content: center;
} 
#child { 
 width: 300px; 
 height: 100px; 
 background: #08BC67; 
 line-height: 100px;
}

<div id="box"> 我是一段测试文本 </div>
css代码：
#box{ 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 line-height: 300px;
}

<div id="box">
  <img src="/UploadFiles/2021-04-02/duncan.jpeg">

运行结果如下：

vertical-align并不像看起来那样天真无邪童叟无欺，以后会单独拎出来专门写一篇。
11. 使用 display 和 vertical-align 对容器里的文字进行垂直居中
html代码：


<div id="box">
  <div id="child">我也是一段测试文本</div>
</div>
css代码：
#box { 
 width: 300px; 
 height: 300px; 
 background: #ddd; 
 display: table;
} 
#child { 
 display: table-cell; 
 vertical-align: middle;
}


运行结果如下：

这里关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。
valign属性规定单元格中内容的垂直排列方式，语法：<td valign="value">，value的可能取值有四种：
top：对内容进行上对齐
middle：对内容进行居中对齐
bottom：对内容进行下对齐
baseline：基线对齐
关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
上次已经为大家介绍了 实现css文字垂直居中的8种方法 这篇文章又为大家新增了3种CSS垂直居中的方法，更多关于CSS垂直居中的方法请阅读下面的相关文章