How to set up 3 Columns with 1 Div Horizontally and Vertically Aligned in each column?

Question

Hello I'm trying to set up three columns and vertically and horizontally center the span in each of the columns. I've tried using flexbox and grid but it's not working out for me

https://i.stack.imgur.com/FjL4L.jpg

<div class="row">
    <div class="column">
        <span class="center">test</span>
    </div>
    <div class="column">
        <span class="center">test</span>
    </div>
    <div class="column ">
        <span class="center">test</span>
    </div>
</div>

.row{
    width:100%;
    height:100%;
}

.column{
    float:left;
    width:33.33%;   
    height: 100%;
    text-align: center;
}

Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Ashish Kamble, Aug 03 '19 at 02:17

score 2 · Answer 1 · answered Aug 03 '19 at 01:51

You can use a combination of grid (for the outer layout) and flexbox for the columns content alignment:

* {
    box-sizing: border-box;
}
.row {
    background: black;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 48px;
    align-items: center;
    height: 100vh;
    padding: 48px;
}

.column {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 100%;
}

<div class="row">
    <div class="column">
        <span class="center">test</span>
    </div>
    <div class="column">
        <span class="center">test</span>
    </div>
    <div class="column ">
        <span class="center">test</span>
    </div>
</div>

How to set up 3 Columns with 1 Div Horizontally and Vertically Aligned in each column?

1 Answers1