1.Horizontally 水平居中
1.1inline或inline-*元素水平居中
给需要居中元素一个block父元素,需要居中的子元素为文本或inline，inline-blck,inline-table,inline-flex
核心代码
.parent { text-align: center; }
inline或inline-*元素水平居中JSbin演示
1.2block元素水平居中
父元素为block元素子元素也为block元素，且子元素设置了宽度。
方法：子元素margin： 0 auto,左右外边距自动填充。
核心代码
.child { margin: 0 auto;}
效果
block元素水平居中JSbin演示
1.3多个block元素水平居中
1.3.1多个block元素一行排列水平居中
方法一：利用inline-block,原理将子元素转化为inline-block，父元素text-align: center;
方法二：利用display:flex;注意子元素高度会保持一致
核心代码
.inline-block-center{
text-align: center;
}
.inline-block-center div{
display: inline-block;
}
.flex-center{
display: flex;
justify-content: center;
}
效果如下
1.3.2多个block元素每行一个水平居中
因为每个block元素独占一行，所以方法是margin: 0 auto
效果如下
多个
block元素每行一个水平居中JSbin演示
2.Vertically垂直居中
2.1inline 或 inline-*元素单行垂直居中
需要垂直居中的元素为单行的inline 或 inline-*元素,例如一个text或者a链接(包括a链接变化而成的按钮)
2.1.1方法一：上下使用相同的padding（推荐）
上下左右使用相同的padding可以不用设置宽高，既可以在修改文本内容时自适应，又可以减少出现BUG的几率
核心代码
main a {
padding-top: 40px;
padding-bottom: 40px;
}
效果如下
2.1.1方法二：设置 line-height 与高度相同
核心代码
main a {
height: 100px;
line-height: 100px;
white-space: nowrap;
/*nowrap文本内的换行无效,内容只能在一行显示*/
}
效果如下
2.2多行文本垂直居中
多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需设置宽高,推荐使用.
如果这样做不起作用，那么文本所在的元素可能是table或者table-cell元素，无论是真正的table还是后期自己添加的CSS.
下面说说这两种情况使用其他方法的垂直居中.
2.2.1方法一：display: table; 和 vertical-align: middle;
核心代码
.center-table{
display: table;
}
.center-table p{
display: table-cell;
vertical-align: middle;
}
效果如下
table + vertical-align: middle;多行文本垂直居中JSbin演示
2.2.2方法二：使用flex布局多行文本垂直居中
一个flex-child可以简单地在flex-parent的中心.（注意设置高度）
核心代码
.flexParent{
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
}
效果如下
2.3 block 元素垂直居中
2.3.1 已知 block 元素高度
原理是绝对定位， top: 50%; 然后 margin-top 设置为负边距且值为高度的一半
核心代码
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
注意:使用 position: absolute;绝对定位会使元素脱离文档流
效果如下
已知
block元素高度垂直居中JSbin演示
2.3.2 block元素高度未知垂直居中
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
核心代码:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
transform: translateY(-50%);
}
效果如下
2.3.3 使用flex布局block元素高度未知垂直居中
核心代码
.parent{
display: flex;
flex-direction: column;
justify-content: center;
}
效果如下
使用flex布局 block 元素高度未知垂直居中JSbin演示
3.Both Horizontally and Vertically水平垂直居中
3.1有固定宽高的元素
核心代码：
依旧是绝对定位+宽高一半的负边距
.parent{
position: relative;
}
.child{
width: 200px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -120px; /*宽高的一半+padding+border负值*/
}
效果如下
3.2宽高不固定的元素
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
核心代码
.parent{
position: relative;
}
.child{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
效果如下
3.3 使用flex布局垂直水平居中
核心代码:
.parent{
display: flex;
justify-content: center;
align-items: center;
}
效果如下
3.4使用grid布局垂直水平居中
核心代码
body, html {
height: 100%;
display: grid;
}
span{
margin: auto;
}
效果如下
参考演示：https://css-tricks.com/centering-css-complete-guide/#center
本文引用归原作者所有
