整理一下常用的CSS居中方式~~~
1、水平居中
块级元素：margin: 0 auto
行内元素：text-align:center
- btn-demo
<div class="box">
<a href="#">BTN</a>
</div>
.box {
border:1px solid red;
text-align: center;
margin-top: 50px;
}
a {
text-decoration:none;
padding: 5px;
background: green;
}
上面的btn居中的例子我们知道在父元素中使用text-align: center就可以实现，如果你仔细可以发现btn的背景色到父元素以外来了，那么这是为什么？
- 其实这里也想拓展一个关于行内元素的特性，就是当对行内元素使用padding的时候，会将其撑开但只有左右占据空间（上下并不占据空间）。但背景色会默认对上下左右的被padding撑开的都起作用，所有才有了上面的奇怪样式。
消除方式：可将行内元素属性设置为display:inline-block
点击预览效果
2、垂直居中
设置上下padding相等
如：padding:30px 0，这种适合于比较固定的布局样式，若对应父元素在页面需要展示不同大小的比例，这种固定上下padding并不适合这样的场景绝对位置居中
3、垂直水平绝对居中
一般可以分为已知元素宽高的水平居中(可以用绝对定位+负margin实现)和未知元素宽高的水平居中，这里直接写后者常见解决方式
- 绝对定位+
transform:translate(...)
<div class="box">
<a href="#">BTN</a>
</div>
.box {
border:1px solid red;
text-align: center;
margin-top: 50px;
height: 200px;
position: relative;
}
a {
text-decoration:none;
padding:10px;
background: green;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
这里对于水平居中使用text-align: center方式实现，当元素为块级元素可将其属性改为display:inline-block;对于垂直居中首先设置父元素position:relative，对当前元素采用绝对居中的方式定义top:50%; left:50%，但这里的居中是相对于该元素左上角的点，而非其中轴线，这时候我们采用transform: translate(-50%, -50%)来改变元素位置达到绝对居中的目的。
- flex布局实现
HTML部分同上面写法一致
.box {
border:1px solid red;
margin-top: 50px;
height: 200px;
display:flex;
justify-content: center;
align-items:center;
}
a {
text-decoration:none;
height:20px;
padding:10px;
background: green;
display:inline-block;
}
这里首先在父元素中设置 display:flex,申明为flex布局，然后设置justify-content: center; align-items:center;，在flex中表示子元素相对父元素主轴和侧轴居中，既水平垂直居中，是不是发现flex布局很强大啊！~~~
