One of my suggestions, for your reference, is that this kind of requirement is very common in my previous projects. Previously, I used the positioning method:

.box {
    width: 500px;
    height: 500px;
    position: relative;
}
.sub-box {
    width: 100px;
    height: 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

or

.box {
    width: 500px;
    height: 500px;
    position: relative;
}
.sub-box {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -50px;
}
Copy the code

The problem with this approach is that you have to know the width and height of the sub-box. If we don’t know the width and height of the sub-box, we can use the transform in the CSS to solve the problem, such as setting the following style:

.box {
    width: 500px;
    height: 500px;
    position: relative;
}
.sub-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

But after I learned Flex later, I found that using Flex to solve this problem is much simpler, just need to set the child in the box spindle and cross axis position as the center, as follows:

.box {
    display: flex;
    /* The spindle is in the middle */
    justify-content: center;
    /* The cross axis is in the middle */
    align-items: center; } ` ` `Copy the code