Question

我在方框中有一个字符A。我想将A移到此框的中心。

    <div class = 'flex-container'>
        <div class = 'box1'> A </div>
    </div>


.flex-container{
    display: flex;
    flex-direction: column;
    font: Tahoma;
    align-items: center;
}

.flex-container > div{
    font-size: 40px;
}

.box1{
    background-color: grey;
    margin: 5px;
    height: 100px;
    width: 100px;
}

我可以用标签p包装A，然后更改此标签的边距以设置A的位置。但是随后必须计算出如何设置边距大小。有没有更简单的方法可以实现这一目标？

Answer 1

您可以为.box1容器添加弹性显示

.flex-container{
    display: flex;
    flex-direction: column;
    font: Tahoma;
    align-items: center;
}

.flex-container > div{
    font-size: 40px;
}

.box1{
    background-color: grey;
    margin: 5px;
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    <div class = 'flex-container'>
        <div class = 'box1'> A </div>
    </div>

如何在div中居中放置元素

1 个答案: