带你3分钟掌握常见的水平垂直居中面试题

大家好，我是Smooth，一名大二的前端爱好者，目标是想要成为一名前端开发工程师

这是一篇关于css 居中知识的总结，只要这些都了解了，居中这方面面试就没问题了

只要涉及到CSS就绕不开定位问题，尤其是盒子居中。居中又分为水平居中和垂直居中，有多种实现方式，下面我便一一列出来。

水平居中

1. inline元素：text-align: center

2. block元素：margin: 0 auto

3. absolute元素：left: 50% + margin-left负值(值为该元素宽度的一半)

4. absolute元素：left: 50% + transform: translateX（-50%)

垂直居中

1. inline元素：line-height的值等于height值

2. absolute元素：top：50%+margin-top负值(值为该元素高度的一半)

3. absolute元素：top：50%+transform: translateY（-50%)

4. absolute元素：有固定宽高度+top，left，bottom，right=0 + margin:auto

水平垂直居中

就是上述的水平居中+垂直居中合起来
这里我举几个常用的例子：

1. 放在定位是relative盒子内的absolute盒子：

top: 50%;left: 50%;transform: translate(-50%,-50%);

2. 知道盒子的宽度和高度

top: 50%;left: 50%;

加上 margin-left 负值(值为该元素宽度的一半);margin-top负值(值为该元素高度的一半)

3. 放在定位是relative盒子内的absolute盒子且该盒子有固定宽高：

top，left，bottom，right=0 + margin:auto

4. CSS3弹性布局（flex）

如果使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素设置成以下属性即可

display:flex // flex布局

align-items:center；// 元素水平居中

justify-content:center；// 元素垂直居中

以上便是这篇教程的全部内容啦

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程~

掘金：https://juejin.cn/user/1302297507801358

CSDN：https://i.csdn.net/#/user-center/profile

最近发文计划为 Webpack 以及 性能优化 知识体系

同时也可扫码关注我的公众号，公众号同步更新