CSS垂直居中技巧：文本与div的解决方案

本文主要介绍了如何使用CSS实现文本和div元素的垂直居中。在CSS布局中，水平居中相对简单，但对于垂直居中则需要采用多种策略。文章总结了不同场景下的垂直居中方法，包括单行文本、多行文本以及div元素的垂直居中解决方案。 对于单行文本的垂直居中，可以通过设置`line-height`属性等于其父元素的高度来实现。例如，一个100px高的`div`，只要将文本的`line-height`也设置为100px，文本就会垂直居中显示。同时，使用`text-align: center;`可以让文本水平居中。 当涉及多行文本时，垂直居中的处理会有所不同。如果父元素高度不固定，可以使用内填充（padding）来模拟居中效果，设置`padding-top`和`padding-bottom`相等，但这种方法不适用于高度固定的情况。 对于固定高度的父元素和多行文本，可以利用Flexbox布局来实现垂直居中。通过设置`display: flex;`和`align-items: center;`，可以轻松地让子元素在垂直方向上居中。若浏览器兼容性不是问题，Flexbox是实现垂直居中的理想选择。 对于div等块级元素的垂直居中，可以使用绝对定位。首先，将父元素设置为相对定位（`position: relative;`），然后将子元素设置为绝对定位（`position: absolute;`），并调整其`top`和`bottom`属性为`0`，同时设置`margin`为`auto`，这样就可以实现垂直居中。例如： ```css .parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; /* 添加其他样式 */ } ``` 另一种方法是使用CSS Grid布局，通过设置`align-items: center;`和`justify-content: center;`，可以同时实现网格内的元素在水平和垂直方向上的居中。 CSS中实现垂直居中有多种方式，包括传统的行高法、内填充法、Flexbox、绝对定位和CSS Grid。开发者应根据项目需求和浏览器兼容性选择合适的方法。