html垂直居中的几种做法

html垂直居中的几种做法

1，定位

（1）父相子绝，再将子盒子top/left各50%，再通过margin-left/top来移动其本身宽高的一半

父{position: relative;}
子{position:absolate;
height:200px;
width:200px;
top:50%;
left:50%;
margin-left:100px;
margin-right:100px;
}

(2)transform:translate(-50%,-50%) 可再不知宽高情况下使用
//设置再子元素，其再各方向上，按自身宽高成比例偏移，配合定位

父{position: relative;}
子{position:absolate;
height:200px;
width:200px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

(3)margin:auto //在子元素设lelt right top bottom为0，再设margin: auto;

父{position: relative;}
子{position:absolate;
height:200px;
width:200px;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2，弹性盒

(1)父盒子设display:flex;子设margin:auto;//仅限于单一子盒子

父{position: flex;}
子{
height:200px;
width:200px;
margin:auto;
}

(2)父盒子设flex，与其他水平居中；

父{display:flex;
justify-content:center;
align-items:center;
}