面试回答

我的一个建议，你们可以参考，这种需求的话在我之前做的项目之中是非常常见的。之前的话我一般使用定位的方式：

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

或者

.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;
}

但是这种方式有一个问题，就是必须得知道sub-box的宽高。 那如果我们没有明确sub-box的宽高，可以使用css中的transform来解决这个问题，比如设置如下的样式：

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

但是在后面我学习了flex之后，我发现了使用flex解决这个问题的话会更加简洁，只需要设置子项在盒子里面的主轴和交叉轴的位置为中心就可以啦，如下样式：

.box {
    display: flex;
    /*主轴在中间*/
    justify-content: center;
    /*交叉轴在中间*/
    align-items: center;
}