「这是我参与2022首次更文挑战的第二天，活动详情查看：2022首次更文挑战」。
大家好，我是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年我也会尽自己所能书写更多前端教程，期待你的关注~
