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