前端开发中，我们经常需要对元素进行水平垂直居中。为此，我特地总结了让元素居中的九种方法。 ## 一、使用grid布局实现居中（一） html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; display: grid; align-items: center; justify-items: center; } p { background: red; } ``` ## 二、使用grid布局实现居中（二） html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; display: grid; align-items: center; justify-content: center; } p { background: red; } ``` ## 三、grid布局配合margin实现居中 html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; display: grid; } p { margin:auto; background: red; } ``` ## 四、flex布局实现居中 html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; display: flex; justify-content:center; align-items:center; } p { background: red; } ``` ## 五、flex布局配合margin实现居中 html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; display: flex; } p { margin:auto; background: red; } ``` ** 注意： ** 以上几种方式是需要我们牢记掌握的，在以后的工作中会经常使用到的几种居中方式。 ## 六、使用display:table-cell实现居中 html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center; } p { background: red; display: inline-block; } ``` ## 七、使用绝对定位实现居中 html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; position: relative; } p { position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%); margin: 0; } ``` ## 八、通过内联元素的特性实现居中 html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; text-align: center; } .box::after { content: ''; line-height: 200px; } p { display: inline-block; } ``` ## 九、通过绝对定位进行居中（已经废弃） html代码 ```

hello

``` CSS代码 ``` .box { width: 200px; height: 200px; border: 1px solid; position: relative; } p { background: red; width: 100px; /*必须要设置宽高*/ height: 40px; /*必须要设置宽高*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } ``` ## 总结推荐使用flex布局的方式实现居中，既方便，适应性又足够好。以上就是九种实现垂直水平居中的方法，其中有些方法是需要我们记住并掌握的，有些方法只需要了解一下即可。 ## 参考资料 - [饥人谷系统班课件](https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-22-11-47-37

《这9种垂直水平居中的方式你肯定不知道》