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

您好，我正在尝试设置三根立柱，并在每根立柱上垂直和水平居中放置跨度。我尝试过使用flexbox和grid，但不适合我

测试
测试
测试
.行{
宽度：100%；
身高：100%；
}
.栏目{
浮动：左；
宽度：33.33%；
身高：100%；
文本对齐：居中；
}

您可以将

网格

（用于外部布局）和

flexbox

组合用于列内容对齐：

*{
框大小：边框框；
}
.行{
背景：黑色；
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：48px；
对齐项目：居中；
高度：100vh；
填充：48px；
}
.栏目{
背景：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：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>

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

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