在复习水平居中与垂直居中时发现居然有点忘了

因此写个笔记下来记录一下

只要涉及到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；// 元素垂直居中

欢迎大家在评论区提出问题

觉得文章对你有帮助的不妨点个赞~