CSS居中方案汇总全家桶

水平居中垂直 / 垂直居中是前端开发中常见的需求，今天就总结一下各式各样的水平 / 垂直居中，为方面描述，以下代码中外层div统一类名为.wrapper。

以下代码均在http://js.jirengu.com/?html,css,js,output 上运行并展示

1. 水平居中

1.1 内联元素水平居中

在内联元素的外层div上用text-align: center

.wrapper {
  text-align: center;
}

1.2 定宽块级元素水平居中

直接margin: 0 auto; 当然上下外边距可以随便设 注意必须是固定宽度的块级元素！

问：为什么？

不是固定宽度的话块级元素默认为100%父级宽度谈何居中？

1.3.1 多个块级元素水平居中(inline-block方法)

.wrapper {
  text-align: center;
  border: 1px solid #ccc;  /*为了看的清晰加上外层边框*/
}
.inner {
  width: 200px;
  height: 200px;
  background: red;
  border: 1px solid #ccc;  /*子盒子也加上边框*/
  display: inline-block;
}

展示效果：

image.png

但这种方法有一个问题！
当页面宽度不够时变会变形

image.png

如果需要保持居中不变形，可以在body上加上min-width，让页面小于一定宽度时出现滚动条。

1.3.2 多个块级元素水平居中(flex-box方法)

用flex布局可以轻松实现多个块级元素水平居中，并且页面宽度不够时不会出现变形，但会调整每个子元素的宽度和高度。

.wrapper {
  display: flex;
  justify-content: center;
}

最终效果：

image.png

宽度不够时：

image.png

2. 垂直居中

2.1.1 单行文本垂直居中(padding填充)

上下填充高度一致即可

span {
  padding: 10px 0;
}

2.1.2 单行文本垂直居中(行高控制)

在外层元素上设置line-height等于height，如果外层元素未设置高度，会以line-height高度作为高度

.wrapper {
  height: 100px;
  line-height: 100px;
}

2.2.1 多行文本垂直居中(padding填充)

同上。

2.2.2 多行文本垂直居中(table-cell展示)

不做详细介绍，不常用，需要可以google

2.2.3 多行文本垂直居中(flex)

注意：此方法只在外层元素定高时有效，且flex布局会将内部子元素变成block类型！！！

.wrapper {
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

2.3.1 定高块级元素垂直居中

利用子元素相对父级绝对定位和负边距

.wrapper {
  position: relative
}
.child {  /*要居中的块级元素*/
  position: absolute;
  top: 50%;
  height: 100px;  
  margin-top: -50px;  
}

2.3.2 不定高块级元素垂直居中

将2.3.1的margin-top改为

  transform: translateY(-50%);

2.3.3 任意块级元素垂直居中(flex)

会将居中元素内的文本也垂直居中

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3. 水平垂直居中

3.1 定高

绝对定位+负边距

3.2 不定高

绝对定位+transform: translate(-50%,-50%);

3.3 flex

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

3.4 grid布局

尚未学习，可自行Google~