几种垂直居中的方法

1. 如果父容器不固定高度，padding/line-height（慎用）即可实现元素的垂直居中

demo-1

demo-1

2. 如果父容器固定高度

• display:table-cell

demo-2

demo-2

• display:inline-block; vertical-align:middle

demo-3

demo-3

• position:absolute;top:50%;left:50%
  • margin-top:-1/2height; margin-left;-1/2width
  • transform:translate(-50%,-50%)

demo-4

demo-4

• position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;

demo-5

demo-5

• display:flex;justify-content:center;align-items:center

demo-6

demo-6

完整demo