CSS3 flex layout, I use skills to generate squares, but after the failure of the layout inside, why in the layout?

I am using the flex layout, through the technique to generate a square, and now the red square is centered, but the position is abnormal and floats directly to the top, what is the reason?
`

< 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>Document</title>
<style>
    -sharpapp{
        margin: auto auto;
        width : 600px;
        height : 800px;
        background-color : -sharpcccccc;
    }
    .d1{
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-color: -sharp656565
    
    }
    .d2{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        position: relative
    }
    .clo{
        position: absolute;
        width: 200px;
        height:200px;
        background: red;
    
    }

</style>

< / head >
< body >

<div id="app">
    <div class="d1">
        <div class="d2">
            <div class="clo"></div>
        </div>
    </div>
</div>

< / body >
< / html >
`

according to my observation, the picture is automatically aligned with the middle position of .d1, but I clearly set up box-sizing=border-box, why did he still run out of this box?
Thank you < del > ~ < / del > < del > ~ < / del > ~

Css
Mar.29,2021

the red square you see is truncated by the browser window ! If you set the margin-top of-sharpapp higher, such as 200px, it will have the following effect

clipboard.png

did you find anything? The center of the red square is stuck on the edge of the container and is evenly divided. Let's explain why this is so.
  1. height:100% this kind of attribute is relative to the parent element, and the height of D1 is 0, and the height of D2 is 0. Although the height is set to 100%, the result is 0.
  2. elements in the flex container, even if they are absolutely positioned, are at the mercy of the layout specified by flex before setting attributes such as "top,left,right,bottom" that will change position.
  3. the red block is set to be vertically centered in the flex container D2 with a height of 0, and it now perfectly holds its center on the level where D2 is located.

if you want to achieve the desired effect in this example, you can make a slight adjustment

  1. D1 add attributes

      box-sizing: border-box;
      position: relative;
  2. d2 change the value of the position attribute to absolute
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30823-2bd32.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30823-2bd32.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?