CSS实现垂直水平居中的五种方法

实例

固定宽高的垂直水平居中

上面的例1和例2，是固定宽高的垂直水平居中，例1采用定位结合margin负值。例2巧妙的利用定位结合margin: auto。最后三个例子都是不固定宽高的垂直水平居中，上面五种方法中我个人最喜欢第三种，不仅兼容性好，通用性也好。第五种是利用flex布局，是最简单的

例3核心代码：

<div class="p">
  <div class="s"></div>
</div>

.p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.s {
 display: inline-block;
}

例4核心代码：

.p {
  display: table-cell;
  vertical-align: middle;
}
.s {
 display: table;
 margin: 0 auto;
}

例5核心代码：

.p {
  display:flex;
}
.s {
 margin: auto;
}