CSS文本垂直居中的几种方法

青旅半醒 2022-12-13 14:02 258阅读 0赞

[观看更佳-点击前往][-]

# 一、单行文本的居中 #

## 1.文字水平居中 ##

<div class='box' style="text-align: center;">hello world</div>

## 2.文本垂直水平居中 ##

<div class="box2" style="width:150px;height:100px;line-height: 100px;">文本垂直水平居中</div>

# 二、多行文本的垂直居中 #

## **通过verticle-align:middle实现CSS垂直居中。** ##

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：table-cell。

![1d2ac9130173d1dc30a49f1be16f4dfc.png][]

## 2、**通过display:flex实现CSS垂直居中。** ##

随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

![4999f87e5dec1dc33546c0fd3cd6ad7c.png][]

## 3、**通过伪元素:before实现CSS垂直居中。** ##

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

![37e3d338ad5a43c9d9812d0532bb9290.png][]

.in::before { 
          content: "";
          display: inline-block;
          vertical-align: middle;
          height: 100%;
        }

## 4、**通过display:table-cell实现CSS垂直居中。** ##

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中

![fa3575f3170bb38205d9e0cd2f8a9e8b.png][]

## 5、**通过隐藏节点实现CSS垂直居中。** ##

创建一个隐藏节点\#hide，使得隐藏节点的height值为剩余高度的一半即可。

这种方法也适用于CSS水平居中，原理一样。

![372b6b4d113463893f0b0d2c06d13faf.png][]

## 6、**已知父元素高度通过transform实现CSS垂直居中。** ##

给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。

![26f3ce54bf9dc4c2f39ce7547043b532.png][]

## 7、到垂直居中的位置。 ##

![193806bf2590a2ee53d6a90231187556.png][]

[-]: https://aqingya.cn/articl/c79c5d4d.html
[1d2ac9130173d1dc30a49f1be16f4dfc.png]: /images/20221123/d76b0b857bfb4adfad32ca3522b52907.png
[4999f87e5dec1dc33546c0fd3cd6ad7c.png]: /images/20221123/f439027f5f4d4a2bb49a594edf469d37.png
[37e3d338ad5a43c9d9812d0532bb9290.png]: /images/20221123/2d9b99c9f0714e34a351c8a25d81d698.png
[fa3575f3170bb38205d9e0cd2f8a9e8b.png]: /images/20221123/7bc32d4634d143969cb9350c9241494a.png
[372b6b4d113463893f0b0d2c06d13faf.png]: /images/20221123/546e301a0c074c7386f332d05b1ecf7a.png
[26f3ce54bf9dc4c2f39ce7547043b532.png]: /images/20221123/98819424668f411db6c7e144ec185d1a.png
[193806bf2590a2ee53d6a90231187556.png]: /images/20221123/0fdb0f2ab2294ab9b03b1e92dc39bc7a.png