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布局很强大啊！~~~

最后编辑于：2017.12.10 01:13:14

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS居中解决方案