html+css页面内容设置水平垂直居中

一、未知宽高设置文本水平垂直居中

<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;
}