如何让子容器的高度等于父容器的宽度的一半

 

如下：有A容器和B容器，A容器宽度和高度已知，使用CSS满足如下条件：

1. B容器高度是A容器宽度的一半
2. B容器左右离A容器都是10px
3. B容器在A中上下居中
4. B容器内部文字水平垂直居中

 这里面水平垂直居中不难实现，在上篇CSS 居中对齐中已经介绍，但是B容器高度为A容器width的一半如何实现呢？

• 可以用到margin 和 padding 的一个特性：百分比。 margin 和padding 的百分比是基于父元素的宽度。
• 如果A容器是视窗ViewPort，可以说使用 "vw" 单位来设置B容器的高度：50vw 即表示视窗宽度的一半

1. 弹性盒子实现居中，padding实现B容器高度控制，注意要把height设为0，这里用的默认的标准盒模型：content-box

 

.A{
    background-color: beige;   
    height: 400px;
    width: 400px; 

    //子元素水平垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
}