Problems caused by the centering of ie weird box model - Codes Helper

this is the thinking of a question by an interviewer on the Nuggets, which is required to be implemented in css. I originally thought it was very simple and didn"t want to do it, but I often felt that it was easy to understand if I didn"t do it, so I gave it a try.
requirements:
An element is vertically centered
An element is 10px
An element
An element is always 50% of the width of element A

-
my understanding is that apart from element A, there are other elements in most cases on the page, so element A should be wrapped in a box so as not to interfere with other elements. Element A can meet the requirements of the above problems in this box,

. < H2 > complete code for personal implementation: < / H2 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            position: relative;
            background-color: palegoldenrod;
            width: 100%;
            box-sizing: border-box;
            padding-top: calc(25% - 5px);
            padding-bottom: calc(25% - 5px);
        }
        .Abox {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: plum;
            margin-left: 10px;
            margin-right: 10px;
            width: calc(100% - 20px);
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="Abox" class="Abox">A A10px Afontsize:20px, AA50% </div>
    </div>
</body>
</html>

the above implementation can satisfy the vertical center of Abox in box without knowing the height of box and Abox in advance.
actually feels that the worst thing to deal with is that the height of element An is always 50% of the width of element A without knowing any actual width and height.

< H2 > Local analysis: < / H2 >

0. Global and background

* {
   margin: 0px;
   padding: 0px;
}
.box {
   background-color: red;
}
.Abox {
   background-color: greenyellow;
}

1. First come out simple vertical center, Abox vertical center, box with relative positioning, Abox with absolute positioning combined with top:0;bottom:0;margin:auto can be achieved.

.box {
     position: relative;
     width: 100%;
}

.Abox {
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
}

2.If the width of the An element is 100% from the left and right sides of the screen, the width of the An element should be 100% minus 20px = >

on the left and right sides.

.Abox {
     margin-left: 10px;
     margin-right: 10px;
     width: calc(100% - 20px);
}

the height of the 3.box is unknown, but the height of the Abox is always half the width of the Abox. Think of using the weird box model of ie, the width+padding+border== > of the width= content of the box uses padding to prop up the width, of the box so that the width and border of the content are 0, so the question is changed to find the height of Abox, that is, to find half of the box"s width,1/2 (20px) = = > (50-10px) and then half-and-half is padding-top,padding-bottom== > (25-5px). Put the Abox high on the box to prop up the whole area.

.box{
    box-sizing:border-box;
    padding-top:calc(25% - 5px);
    padding-bottom:calc(25% - 5px);
}

The font font-size:20px, in the

4.An element is centered horizontally:

.Abox{
    font-size:20px;
    text-align:center;
}

effect picture:

< H2 > here comes the problem: < / H2 >

in fact, the height of the entire visual area of Abox is supported by the padding in the weird box model, that is, the 190px above actually does not correspond to the height, in css but the superposition of padding-top and padding-bottom, and the height of the content is actually 0. then the case where ordinary line-height equals height cannot handle the vertical centering of internal text. So how should we deal with this situation? Or is it simply not appropriate for the weird box model to deal with the middle of the problem?

the practices of js and display:flex will be added when it is improved later.