垂直水平居中的多种方法 主要的4种

 针对div

display: flex;

align-items: center;

justify-content: center;

 

绝对定位+transform

position:absolute;

top: 50%;

left: 50%;

transform:translate(-50%,-50%);

 

绝对定位+margin：auto

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

margin:auto

 

绝对定位+margin反向偏移

position：absolute;

top:50%;

left:50%;

margin-left:-(width+padding)/2+'px';

margin-top:-(height+padding)/2+'px';

 

 

针对单行的文本

line-height同height

text-align: center