关于css:浅谈在CSS中元素水平居中且垂直居中的常用的方法

（1）第一种办法：应用相对定位 + 外边距（设置 position 为相对定位 absolute, 给 left 和 top 别离设置为父级元素的 50%, 设置上外边距和左外边距为别离为本身高度和宽度的一半，且为负值）

position:absolute; 
left:50%; 
top:50%; 
margin-top:-height/2px; 
margin-left:-width/2px;

（2）第二种办法：也是应用相对定位 + 外边距（设置 position 为相对定位 absolute, 给 left、right、top、bottom 都设置为零；设置外边距为 auto 主动适应）

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

（3）第三种办法：dispaly:inline-block 与 vertical-align:middle 配合来父元素的 text-align:center;

 父：text-align:center;
子：display:inline-block
vertical-align:middle

display 属性详情
vertical-align 属性详情

（4）第四种办法：应用相对定位 + 平移（设置 position 为相对定位 absolute, 给 left 和 top 别离设置为父级元素的 50%, 设置 X 轴平移和 Y 轴平移间隔为别离为本身高度和宽度的一半，且为负值）

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

什么是 transform?

（5）第五种办法：这种办法是应用 flex 布局，在元素 css 中申明为 flex;

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

什么是 flex 布局？

加油！！！