Html 输入及；按钮在子div中保持居中

我有一个父div，里面有3个子div。我需要每个子div占据屏幕的三分之一，并且每个div内的所有元素（文本、按钮和输入）始终位于子div的中心，从而做出响应

我可以让每个子分区占据屏幕的三分之一，但元素没有响应，在子分区内分成两列，如下图所示：

以下是使用的代码：

输入，
选择，
文本区{
宽度：100%；
填充：6px；
边框：1px实心#ccc；
边界半径：5px；
}
标签{
填充：12px 12px 12px 0；
显示：内联块；
}
.订单\创建\发货\库存>部门{
宽度：30%；
保证金：5px；
填充：自动；
显示：内联表；
边框：实心；
}
.订单创建，
.订购船舶，
.订购{
边界半径：5px；
背景色：#F2F2；
填充：10px；
显示：表格单元格；
}
#提交创建订单，
#提交订单，
#提交订单{
光标：指针；
显示器：flex；
弯曲方向：立柱；
}

条形码
所有者
产品清单
到期日期
最低温度
最高温度
物联网设备
---请选择一个物联网设备---
最终的目的地
创建订单
订单编号
实际位置
实际温度
交易对手
物联网设备
预期日期
目的地
船票
订单编号
实际位置
实际温度
交易对手
物联网设备
---请选择一个物联网设备---
商店订单

刚刚发现错误，我只需要添加到标签而不是输入，请选择以下选项：

display: flex;
flex-direction: column;

---

对于按钮，添加margin:auto，centered任何子按钮都可以完成这项工作，如果您发现将第一个按钮设置为完整按钮很有用，我会在第一个按钮上再添加一个选项

此外，为了使容器具有响应性，您可以将父容器设置为flex box。然后使用flex:1设置所有子级，并使用媒体查询使其成为列

/* --- FOR THE CONTAINERS --- */

#OrderCreateShipStock {
    display: flex;
}
.Order_Create_Ship_Stock>div {
    margin: 5px;
    border: solid;
    flex: 1;
}
@media only screen and (max-width: 800px) {
#OrderCreateShipStock {
    flex-wrap: wrap;
    flex-direction: column;
}
}


/* --- BUTTON CENTERED --- */

#SubmitCreateOrder, #SubmitShipOrder, #SubmitStoreOrder {
    display: flex;
    margin: auto;
}

/* --- BUTTON FULL CENTERED TEXT --- */ 

#SubmitCreateOrder, #SubmitShipOrder, #SubmitStoreOrder {
    width: 100%;
    justify-content: center;
    align-items: center;
    
}

输入，
选择，
文本区{
宽度：100%；
填充：6px；
边框：1px实心#ccc；
边界半径：5px；
}
标签{
填充：12px 12px 12px 0；
显示：内联块；
}
#OrderCreateShipStock{
显示器：flex；
}
.订单\创建\发货\库存>部门{
保证金：5px；
边框：实心；
弹性：1；
}
.订单创建，
.订购船舶，
.订购{
边界半径：5px；
背景色：#F2F2；
填充：10px；
显示：表格单元格；
}
#提交创建订单，
#提交订单，
#提交订单{
显示器：flex；
保证金：自动；
}
#提交创建订单{
宽度：100%；
证明内容：中心；
对齐项目：居中；
}
@仅介质屏幕和（最大宽度：500px）{
#OrderCreateShipStock{
柔性包装：包装；
弯曲方向：立柱；
}
}

条形码
所有者
产品清单
到期日期
最低温度
最高温度
物联网设备
---请选择一个物联网设备---
最终的目的地
创建订单
订单编号
实际位置
实际温度
交易对手
物联网设备
预期日期
目的地
船票