【CSS】水平垂直居中方法汇总

水平垂直居中

方法一：
position:absolute;
top:50%;
margin-top:-y/2px;
left:50%;
margin-left:-x/2px;

方法二：弹性盒
父盒子为：display:flex;
子盒子为：marigin:auto;

方法三：
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

方法四：适用于文字垂直水平居中
height: 50px;
line-height: 50px;
text-align: center;

水平居中

方法一：适用于盒子（必须有宽度）块级元素
margin:0 auto;
或
position:absolute;
left:50%;
margin-left:-x/2px;

方法二：适用于文字/行内元素/行内块
text-align:center

方法三：适用于没有明确宽度的盒子/文字
position:absolute;（不能使用relative，无效）
left:50%;
transform:translateX(-50%);

垂直居中

方法一：图片（使图片与文字中线对齐）
vertical-align:middle;

方法二：
position:absolute;
top:50%;
margin-top:-y/2px;

方法三：
position:absolute;
top:50%;
transform:translateY(-50%);