如何让⼦容器的⾼度等于⽗容器的宽度的⼀半
如下：有A容器和B容器，A容器宽度和⾼度已知，使⽤CSS满⾜如下条件：
1. B容器⾼度是A容器宽度的⼀半
2. B容器左右离A容器都是10px
3. B容器在A中上下居中
4. B容器内部⽂字⽔平垂直居中
这⾥⾯⽔平垂直居中不难实现，在上篇中已经介绍，但是B容器⾼度为A容器width的⼀半如何实现呢？
可以⽤到margin 和 padding 的⼀个特性：百分⽐。 margin 和padding 的百分⽐是基于⽗元素的宽度。
如果A容器是视窗ViewPort，可以说使⽤ "vw" 单位来设置B容器的⾼度：50vw 即表⽰视窗宽度的⼀半
1. 弹性盒⼦实现居中，padding实现B容器⾼度控制，注意要把height设为0，这⾥⽤的默认的标准盒模型：content-boxmargin属性值可以为百分比
.A{
background-color: beige;
height: 400px;
width: 400px;
//⼦元素⽔平垂直居中
display: flex;
align-items: center;
justify-content: center;
}
.B{
// ⽔平⽅向占满，左右保留10px
flex: 1;
margin: 0 10px;
// ⾼度为⽗亲容器⼀半
padding: 25% 0;
height: 0px;
background: wheat;
// 内部⽂案居中
display: flex;
justify-content: center;
align-items: center;
}
2. absolute 实现居中， padding实现B容器⾼度控制
.A{
position: relative;
height:400px;
width:400px;
background-color: beige;
}
.
B{
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto 10px;
padding: 25% 0;
height: 0;
background: wheat;
}
.
text-content{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3. 若A是视窗，宽度为100vw ，⾼度为100wh，直接设置 B ⾼度为50vw即可
.B{
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto 10px;
height: 50vw;
background: wheat;
}
.text-content{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

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