https://juejin.im/post/5db706d5f265da4d31073959

我们在日常的开发中，经常会遇到这样一个问题，就是如何实现居中水平垂直居中对齐。并且在面试中也会出现这样的问题，但是我们往往回答的不是很全部，而导致没有得到面试加分。接下来我们通过不同的方式来实现，让我们成功破解这道面试。

1、定宽高

一、绝对定位和负magin值

二、绝对定位 + transform

三、绝对定位 + left/right/bottom/top + margin

四、flex布局

五、grid布局

六、table-cell + vertical-align + inline-block/margin: auto

2、不定宽高

一、绝对定位 + transform

二、table-cell

三、flex布局

四、flex变异布局

五、grid + flex布局

六、gird + margin布局

七、writing-mode属性布局

writing-mode 属性定义了文本在水平或垂直方向上如何排布。兼容性上还有些小瑕疵，但大部分浏览器已经支持。

3、番外(图片定高|不定高水平垂直居中)

一、table-cell

二、 ::after

三、 ::before

四、总结

这里总结了很多种垂直水平居中的方法，但是肯定不是最完全的，还有很多其他中方式。但是总体的思路可以总结为以下几点。

一、内联元素居中布局

1. 水平居中

• 行内元素可设置：text-align: center;

• flex布局设置父元素：display: flex; justify-content: center;

2. 垂直居中

• 单行文本父元素确认高度：height === line-height

• 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;

二、块级元素居中布局

1. 水平居中

• 定宽: margin: 0 auto;

• 不定宽：参考上诉例子中不定宽高例子。

2. 垂直居中

• position: absolute设置left、top、margin-left、margin-to(定高)；

• position: fixed设置margin: auto(定高)；

• display: table-cell；

• transform: translate(x, y)；

• flex(不定高，不定宽)；

• grid(不定高，不定宽)，兼容性相对比较差；

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式 重温系列（9篇全）

4. 正则 / 框架 / 算法等 重温系列（16篇全）

5. Webpack4 入门（上）|| Webpack4 入门（下）

6. MobX 入门（上） ||  MobX 入门（下）

7. 59篇原创系列汇总

回复“加群”与大佬们一起交流学习~

点这，与大家一起分享本文吧~