html - 如何设置 3 列，每列 1 个 Div 水平和垂直对齐？

Question

您好，我正在尝试设置三列，并在每列中将跨度垂直和水平居中。我试过使用 flexbox 和网格，但对我来说效果不佳

https://imgur.com/a/D6Wbqe5

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

Answer 1

您可以结合使用 grid(用于外部布局)和 flexbox 来对齐列内容:

* {
    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>