水平居中垂直 / 垂直居中是前端开发中常见的需求，今天就总结一下各式各样的水平 / 垂直居中，为方面描述，以下代码中外层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方法)
<div class="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
.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~
