CSS居中解决方案

整理一下常用的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布局很强大啊！~~~

作者：七_五
链接：https://www.jianshu.com/p/0fc76e1b1558