CSS布局

CSS实现居中布局

方式一

# parent
text-align: center;
# child
display: inline-block;

方式二(推荐)

display: block;
margin: 0 auto;

方式一

# parent
position: relative;
# child
position: absolute;
left: 50%;
transform: translateX(-50%);

垂直居中

(推荐)

display: flex;
align-items: center;

(推荐)

display: table-cell;
vertical-align: middle;

# parent
position: relative;
# child
position: absolute;
top: 50%;
transform: translate(-50%);