用CSS样式让div内元素垂直居中

要将 div 内的元素垂直居中，可以使用 CSS 来实现。
如果 div 只包含单行文本或图片等 inline-level 元素，则可以通过设置 line-height 属性为与 div 高度相同的值来实现垂直居中。示例代码如下所示：

<style>
    .container {
        height: 200px; /* div 的高度 */
        background-color: lightgray;
        text-align: center; /* 水平居中 */
        line-height: 200px; /* 与 div 高度相同 */
    }
</style>
 
<div class="container">
    这里放入需要垂直居中的内容
</div>

如果 div 包含多行文本、多个 block-level 元素或者其他复杂布局结构，则可以使用 flexbox（弹性盒子）进行垂直居中。示例代码如下所示：

<style>
    .container {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        height: 300px; /* div 的高度 */
        background-color: lightgray;
    }
</style>
 
<div class="container">
    这里放入需要垂直居中的内容
</div>