css 居中正方形50%

CSS居中正方形的一种方法是利用绝对定位和50%的left和top值。我们可以给容器div设置宽高相等的值，并且将position属性设为absolute,在设置left和top为50%。接着我们可以使用负值的margin将正方形容器居中。

.container {
        position: relative;
        width: 200px;
        height: 200px;
}
.square {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
}

这段代码中，.container是正方形容器的父级元素，.square是正方形的子元素。我们将.container的宽高都设置为200px，这意味着正方形的宽高也将为200px，left和top分别为50%，这表示正方形将水平和垂直居中。然后我们使用负margin（-100px）将正方形容器居中。

如果我们可以使用Flexbox实现这个功能，它会更简单。我们可以使用flexbox将正方形容器和子元素居中。

.container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
}
.square {
        width: 200px;
        height: 200px;
}
    

这段代码中，我们把.container设为flex，并设置justify-content和align-items都为center，这意味着容器和子元素将在中心对齐。我们将正方形的宽和高都设置为200px。这段代码的优点是它不需要使用负的margin。Flexbox还提供了更多的布局选项，所以这是一种更加灵活的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！