How to center an element in div

Question

I have a character A center within a box. I want to move A to the center of this box.

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

I can wrap A with the tag p then change the margin of this tag to set the position of A. But then one has to calculate how to set the margin size. Is there any more straightforward way to achieve this goal?

score -1 · Accepted Answer · answered Oct 29 '20 at 17:50

You can add flex display for .box1 container

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

How to center an element in div

1 Answers1