居中布局

完整源码：戳这

水平居中

前提：不定宽度 部分dom如下所示：

<div class="outDiv outterBox1">
  <div class="inDiv innerBox1">就这</div>
</div>

1.text-align + inline-block

.outterBox1 {
  text-align: center;
}
.innerBox1 {
  display: inline-block;
}

2.table + margin

.outterBox2 {
}
.innerBox2 {
  display: table;
  margin: 0 auto;
}

3.absolute + transform

.outterBox3 {
  position: relative;
}
.innerBox3 {
  position: absolute;
  left: 50%;
  /* 相对于自身 */
  transform: translateX(-50%);
}

4.flex + justify-content (推荐)

.outterBox4 {
  display: flex;
  justify-content: center;
  /* 这一句是因为flex默认垂直方向拉伸布局(align-items: stretch) */
  align-items: flex-start;
}
.innerBox4 {
}

页面效果

具体可参考，源码里的horizontalMiddle.css

垂直居中

前提：不定高度 部分dom如下所示：

<div class="outDiv outterBox1">
  <div class="inDiv innerBox1">就这</div>
</div>

1.table-cell + vertical-align

.outterBox1 {
  display: table-cell;
  vertical-align: middle;
}
.innerBox1 {
}

2.absolute + transform

.outterBox2 {
  position: relative;
}
.innerBox2 {
  position: absolute;
  top: 50%;
  /* 相对于自身 */
  transform: translateY(-50%);
}

3.flex + align-items

.outterBox3 {
  display: flex;
  /* 这一句是因为flex默认垂直方向拉伸布局(align-items: stretch) */
  align-items: center;
}
.innerBox3 {
}

页面效果

具体可参考，源码里的verticalMiddle.css

水平垂直居中布局

前提：不定宽度和高度 部分dom如下所示：

<div class="outDiv outterBox1">
  <div class="inDiv innerBox1">就这</div>
</div>

1.text-align + inline-block + table-cell + vertical-align

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

2.absolute + transform

.outterBox2 {
  position: relative;
}
.innerBox2 {
  position: absolute;
  top: 50%;
  /* 相对于自身 */
  transform: translate(-50%, -50%);
}

3.flex + justify-content + align-items

.outterBox3 {
  display: flex;
  justify-content: center;
  /* 这一句是因为flex默认垂直方向拉伸布局(align-items: stretch) */
  align-items: center;
}
.innerBox3 {
}

页面效果

具体可参考，源码里的horizontalAndVertical.css

文中如有错误，欢迎在评论区指正