css 居中效果

上下居中：

position: absolute;
top:50%;
transform: translateY(-50%);

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

左右居中：

text-align: center;  //父级

margin: 0 auto;

position: absolute;
left:50%;
transform: translateX(-50%);

整页居中：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

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