position实现块级元素垂直居中

时间:2024-04-03 17:57:15

块级元素垂直居中(position方法),

css部分:

*{padding: 0;margin: 0;}
body,html,.wrap{width: 100%;height: 100%;}
.wrap{background: red;position: relative;}
.box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}

html部分:

<div class="wrap">
    <div class="box"></div>
</div>

效果图:

position实现块级元素垂直居中

心得:

父元素宽高不定,设为body,html,.wrap{width: 100%;height: 100%;}

子元素设置样式.box{;width: 100px;height: 100px;background: yellow;},添加绝对定位position: absolute;,

子元素绝对定位后,父元素添加相对定位.wrap{background: red;position: relative;}

子元素垂直居中top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);

 

哇咔咔~希望对小伙伴们有帮助呀~~