CSS之居中布局的实现方法

 .center { text-align: center; }

.center { margin: 0 auto; }

<section class="center">
    <div>水平垂直居中</div>
</section>

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

<section class="center">
    水平垂直居中
</section>

.center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

<section class="center">
    水平垂直居中
</section>

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

<section class="center">
    水平垂直居中
</section>

.center {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);   
}

<section class="center">
    水平垂直居中
</section>

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
}

<div class="table">
  <div class="table-cell">
    <div class="center-content">
      水垂直居中
    </div>
  </div>
</div>

.table{ display: table; }
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.center-content{
  width: 50%;
  margin: 0 auto;
}