一.水平居中
1.文字水平居中
测试居中
2.盒子居中
是盒子居中
3.多块级元素水平居中 
简单不先于复杂
而是在复杂之后
简单不先于复杂，而是在复杂之后。
简单不先
4.弹性布局，多块级水平居中
测试1
测试2测试2测试2测试2测试2测试2测试2
测试3测试3测试3测试3
display: flex;兼容性不好可以这样解决：最少支持ie10以上
.flex-center{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex-center>div { -webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
5.垂直居中
1.元素是display:block和display:inline-block都可以使用height:100px ,line-height:100px;
2.利用display:table-cell
The more technology you learn
3.用flex布局
Dance like nobody
4.块级元素固定高度（这个应该是大家最熟悉的，例子就不放了）
.parent {position: relative;
}
.child {position: absolute; top: 50%; height: 100px; margin-top: -50px; }5.不知高度
世界上有 10 种人，懂二进制的和不懂二进制的。
transform的兼容性：
transform: translate(50px,100px);
-ms-transform: translateY(-50%) /* IE 9 */
-webkit-transform: translateY(-50%) /* Safari and Chrome */
-o-transform: translateY(-50%)/* Opera */
-moz-transform: translateY(-50%)； /* Firefox */ 
三，水平居中，垂直居中
1.固定宽高的水平垂直居中（大家熟悉的）
parent {
position: relative;
}
.child {width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
2.不知宽高-水平垂直居中
.parent {position: relative;
}
.child {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }3.flex布局（上面水居中和垂直居中有例子就不写了）
.parent {display: flex;justify-content: center; align-items: center; }4.利用grid实现水平垂直居中，兼容性较差，不推荐。
.parent {height: 140px;display: grid; } .child { margin: auto; }
5.弹窗的水平居中（截图不好放，就不放了，大家粘贴就可以运行）
水平垂直居中了，好开心哦
大家有好的方法就留言哈