--- highlight: an-old-hope theme: healer-readable --- > 这是一篇关于居中对齐方式的总结开篇之前，先问一下大家都知道几种居中的实现方式？面试时答出来两三个就不错了，就怕面试官还让你继续说。今天就来总结一下这些居中的方式 1. 使用flex布局设置居中。 2. 使用flex 时也能通过给子项设置margin: auto实现居中。 3. 使用绝对定位的方式实现水平垂直居中。 4. 使用grid设置居中。 5. 使用grid时还能通过给子项设置margin: auto实现居中。 6. 使用tabel-cell实现垂直居中。 7. 还有一种不常用的方法实现垂直居中。 8. 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设置为0 ## 1.flex布局设置居中常见的一种方式就是使用`flex`布局设置居中。利用弹性布局(`flex`)，实现水平居中，其中`justify-content` 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式给容器设置： - `display: flex;`写在父元素上这就是定义了一个伸缩容器 - `justify-content `主轴对齐方式，默认是横轴 - `align-items` 纵轴对齐方式，默认是纵轴优点：简单、方便、快速，三行代码搞定。 ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7118981325154942990) ## 2.flex-给子项设置第一种方式是给父盒子设置属性，这一种是给子盒子设置`margin: auto`实现居中。给容器设置 `display: flex;` 子项设置 `margin: auto;` ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7118982254939865125) ## 3.绝对定位使用绝对定位的方式实现水平垂直居中。容器设置`position: relative`。子元素设置 `position: absolute`; `left: 50%`; `top: 50%`; `transfrom: translate(-50%, -50%)`; 优点就是不用关心子元素的长和宽，但是这种方法兼容性依赖translate2d的兼容性 ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7118982917941886984) ## 4.tabel-cell实现垂直居中 css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中而且tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了 - 使用tabel-cell实现垂直居中,容器设置 `display: table-cell;`; - ` vertical-align: middle`属性设置元素的垂直对齐方式 - 子元素如果是块级元素，直接使用左右`margin:auto`实现水平居中。如果是行内元素，给容器设置`text-align: center` 利用 `text-align: center` 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素`inline`, 内联块`inline-block`, 内联表`inline-table`, `inline-flex`元素水平居中都有效。 ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7120133644575834142) ## 5.grid设置居中 1. 使用grid设置居中。给容器设置 `display: grid;` `align-items: center;` `justify-content: center;` 通过给容器设置属性，达到居中效果,但是这种方式兼容性较差，不推荐。 ```js

水平垂直居中

```` [代码片段](https://code.juejin.cn/pen/7118992357894127623) ## 6.grid给子项设置使用grid时还能通过给子项设置`margin: auto;`实现居中。给容器设置 `display: grid;` 子项设置 `margin: auto;` 某些浏览器会不支持grid布局方式，兼容性较差，不推荐。 ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7118993220893147172) ## 7.给容器加给伪元素这是一种不常用的方法实现垂直居中。**给容器加给伪元素**，设置`line-height`等于容器的高度。给孩子设置`display: inline-block`; 此种方式适合给文本设置水平垂直居中 ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7118994236929753119) ## 8.还有一种奇葩的方法这个奇葩方式和第三种使用绝对定位相似，只不过需要给子元素设置 `position: absolute`; 设置固定宽度和高度;`top、left、bottom、right`都设置为0; margin设置为auto；也能实现垂直水平居中。 ```js

水平垂直居中

``` [代码片段](https://code.juejin.cn/pen/7118995591987724295) 以上就是一些我们常用的垂直居中的方案。由于垂直居中往往需要修改`display`属性，所以就会在排版上造成一些影响。例如不该用`flexbox`的地方如果用了`flexbox`，不该用`table`的地方用了`table`，不该用`inline-block`的地方用了`inline-block`，后续反而要多写许多其他的定位样式来修正，那就有点得不偿失了。因此如何活用这些CSS垂直居中的方法，就要看大家的版面结构而灵活运用我正在参与掘金技术社区创作者签约计划招募活动，[点击链接报名投稿](https://juejin.cn/post/7112770927082864653 "https://juejin.cn/post/7112770927082864653")。