CSS让元素水平垂直居中的常用方法

一、定宽居中
方法1

position:absolute;
top:50%;
left:50%;
margin-top:-50px; /*假定元素高为100px*/
margin-left:-50px; /*假定元素宽为100px*/

方法2

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

二、不定宽居中
方法1

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

方法2

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