如何在CSS中实现DIV的垂直居中对齐？

使用flex布局，父容器设置display: flex; align-items: center;。

1、使用Flexbox布局

介绍：Flexbox是一种强大的布局方式，可以方便地实现水平和垂直居中。

示例代码：

     <div class="container">
       <div class="content">这是一个居中的div元素。</div>
     </div>

     .container {
       display: flex;
       justify-content: center; 
       align-items: center;
       height: 300px;
     }
     .content {
       text-align: center;
     }

2、使用绝对定位和负边距

介绍：通过设置元素的绝对定位和负边距，可以实现垂直居中。

示例代码：

     <div class="container">
       <div class="content">这是一个居中的div元素。</div>
     </div>

     .container {
       position: relative;
       height: 300px;
     }
     .content {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
     }

3、使用表格布局

介绍：表格布局是一种传统的CSS布局方法，可以通过模拟表格单元格来实现垂直居中。

示例代码：

     <div class="container">
       <div class="table">
         <div class="table-cell">这是一个居中的div元素。</div>
       </div>
     </div>

     .container {
       display: table;
       text-align: center;
       height: 300px;
       width: 100%;
     }
     .table {
       display: table-cell;
       vertical-align: middle;
     }
     .table-cell {
       display: inline-block;
     }

4、使用Grid布局

介绍：Grid布局是一种较新的CSS布局方法，提供了更高级的布局功能，可以轻松实现垂直居中。

示例代码：

     <div class="container">
       <div class="content">这是一个居中的div元素。</div>
     </div>

     .container {
       display: grid;
       place-items: center;
       height: 300px;
     }
     .content {
       text-align: center;
     }