CSS实现div垂直居中：单行/多行文字解决方案

本文档详细介绍了在HTML和CSS中如何实现`div`元素的垂直居中，涵盖了单行和多行文字的情况，包括未知高度和固定高度的处理方法。 在CSS布局中，垂直居中是一个常见的需求，但不像水平居中那样直观。`vertical-align`属性通常用于表格元素，对非表格元素如`div`和`span`无效。因此，我们需要采用其他方法来实现`div`的垂直居中。 一、单行文字垂直居中 对于只包含单行文字的`div`，我们可以利用`line-height`属性来实现垂直居中。将`div`的高度设置为与`line-height`相同，可以确保文字位于容器的中心。例如： ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 这里的`overflow: hidden`用于防止内容溢出或产生自动换行，确保文字保持在容器内居中显示。 二、多行未知高度文字的垂直居中 对于多行文字且高度不确定的情况，可以使用以下几种方法： 1. 使用Flexbox布局： Flexbox布局提供了方便的`align-items: center`属性，可以轻松实现子元素的垂直居中。 ```css .container { display: flex; align-items: center; } ``` 2. 使用Grid布局： CSS Grid布局允许通过`align-items: center`将内容垂直居中。 ```css .container { display: grid; align-items: center; } ``` 3. 使用绝对定位： 创建一个相对定位的父容器，并设置子元素的绝对定位，然后通过`top`和`transform`属性进行调整。 ```css .container { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } ``` 4. 使用CSS Transform： 利用`translateY`函数，将元素向上移动自身高度的一半，实现垂直居中。 ```css .child { position: relative; top: 50%; transform: translateY(-50%); } ``` 5. 使用CSS Table布局： 将元素的display属性设置为table-cell，然后使用`vertical-align: middle;`。 ```css .container { display: table-cell; vertical-align: middle; } ``` 每种方法都有其适用场景和兼容性考虑，开发者应根据项目需求和目标浏览器选择合适的方法。通过灵活运用这些技巧，可以确保在不同情况下都能实现`div`元素的垂直居中。