CSS 实现居中的各种方式

CSS 实现“居中”的各种方式

本文将从盒模型的水平、垂直、水平垂直居中三个方面，总结实现各种方式。

---

---

一、水平居中

1、行内/行内块元素 text-align: center

行内/行内块元素的父级盒子指定 text-align: center，可以实现水平居中

2、块级元素 margin: 0 auto

有width，直接使用 margin: 0 auto
无width，需要通过以下方式之一设置水平居中了

• 设置盒子 display: table，然后使用 margin: 0 auto
• 设置父级盒子 display: inline-block；然后指定父级盒子 text-align: center

3、父级盒子设置 display: flex; justify-content: center

4、absolute + transform

首先子绝父相，当前盒子设置 position: absolute 后，给父级盒子设置 position: relative
然后给当前盒子进行如下设置：

• 水平定位距离50%，