CSS让盒⼦垂直居中的⼏种⽅式
1.设置⾏⾼等于盒⼦⾼度
.div{
line-height=盒⼦⾼度;
}
2.弹性盒⼦模型布局
.div{
dipslay:flex;//设置为弹性盒⼦布局
css设置文字垂直居中justify-content:center；//设置⽔平居中
align-content:center;//设置垂直居中
}
3.使⽤绝对定位和transform
使⽤绝对定位时，⼀般要给⽗元素进⾏position:relative相对定位。否则绝对定位将参考window进⾏定位。
.div{
position:absolute;
top:50%;
left:50%;
/*
*绝对定位的top值和left值是以盒⼦的左上⾓为基点的，所以还需要回调⾃⾝⾼度和宽度的50%
*/
transform：translate(-50%,-50%)// 平移⾃⾝宽度和⾼度的50%
}
4.使⽤绝对定位和margin: auto
使⽤绝对定位时，⼀般要给⽗元素进⾏position:relative相对定位。否则绝对定位将参考window进⾏定位。
.div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。