padding和margin的百分比的像素基準(zhǔn)是其父元素的寬度。
基于這個(gè)特點(diǎn)來(lái)做個(gè)題,
寫代碼:css div 垂直水平居中,并完成 div 高度永遠(yuǎn)是寬度的一半(寬度可以不指定);
<div class="outer">
<div class="inner">
<div class="box">hello</div>
</div>
</div>
.outer {
width: 600px;
}
.inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background: red;
}
.box {
position: absolute;
width: 100%;
height: 100%;
}
由于padding和margin的百分比的像素基準(zhǔn)是其父元素的寬度。
其中 .box 就是容器,此時(shí)實(shí)現(xiàn)了 div 高度永遠(yuǎn)是寬度的一半(寬度可以不指定)
css div 垂直水平居中,這個(gè)就老生常談了
給 .outer 增加樣式
// 服務(wù)于垂直居中
height: 100%;
// 水平居中
margin: 0 auto;
display: flex;
// 子元素垂直居中
align-items: center;
此時(shí)實(shí)現(xiàn) div.box 垂直水平居中,并完成 div.box 高度永遠(yuǎn)是寬度的一半(寬度可以不指定);
.outer {
width: 600px;
height: 100%;
background: rgb(225, 225, 235);
margin: 0 auto;
display: flex;
align-items: center;
}
.inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 50%;
background: red;
}
.box {
position: absolute;
width: 100%;
height: 100%;
}