一、未知宽高设置文本水平垂直居中
<div class="app_container"><div class="content">水平垂直居中文字</div></div>
1、绝对居中+水平位置
.app_container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
2、flex属性居中
.app_container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;}
3、flex + margin auto
.app_container {height: 100%;width: 100%;display: flex;}.content {margin: auto;}
4、grid属性居中
.app_container{height:100%;width:100%;display:grid;align-items:center;justify-content:center;}
5、grid 子项属性居中
.app_container{height:100%;width:100%;display:grid;}.content{align-self:center;justify-self:center;}
6、grid+ margin auto
.app_container {height: 100%;width: 100%;display: grid;}.content {margin: auto;}
7、-webkit-box 属性居中
.app_container {height: 100%;width: 100%;display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
8、writing-mode
.app_container {height: 100%;width: 100%;writing-mode: tb-lr;writing-mode: vertical-lr;text-align: center;}.content {writing-mode: lr-tb;writing-mode: horizontal-tb;text-align: center;width: 100%;display: inline-block;}
二、已知宽高设置文本水平垂直居中
1、line-height + text-align
.app_container {height: 500px;width: 500px;line-height: 500px;text-align: center;border: 1px solid #d2d2d2;}
2、table-cell + text-align
.app_container {height: 500px;width: 500px;display: table-cell;vertical-align: middle;text-align: center;border: 1px solid #d2d2d2;}
3、须知宽高 + 绝对居中 + margin 负边距
.app_container {height: 500px;width: 500px;position: relative;border: 1px solid #d2d2d2;}.content {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin: -50px 0 0 -50px;}
4、须知宽高 + 绝对定位 + calc
.app_container {height: 500px;width: 500px;position: relative;border: 1px solid #d2d2d2;}.content {width: 100px;height: 100px;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);}
5、须知宽高 + 绝对居中 + margin: auto
.app_container {height: 500px;width: 500px;position: relative;border: 1px solid #d2d2d2;}.content {width: 100px;height: 100px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
