Html CSS:带弯曲边缘和居中文本（水平和垂直居中）

我想实现如下所示的目标

在代码中，我使用固定高度和边距

在没有固定高度和边距的情况下，如何实现相同的效果？ 如何使文本垂直居中

注意：div之间的白色边框仅用于图示

代码：

.分区{ 宽度：160px； 高度：50px； 背景颜色：灰色； 边缘顶部：10px； 边缘底部：10px； 显示：内联块； 文本对齐：居中； 字体大小：30px； } .bg灰色左{ 边框左上半径：25px； 边框左下半径：25px； } .bg灰色中间{ 边界半径：0px； } .bg灰色右侧{ 边框右上角半径：25px； 边框右下半径：25px； } .集装箱{ 边框：实心1px灰色； 宽度：485px； } .div:n-child1、.div:n-child2{ 右边框颜色：白色； 右边框宽度：1px； 右边框样式：实心 } -> 第一组 第2组 第3组

---

-> 您不需要高度来集中固定它。只需添加填充和删除边距，它就会产生您需要的效果

.div{
    width:160px;
    background-color: gray;
    display:inline-block;
    text-align: center;
    font-size: 30px;
    padding: 10px;
  }

---

在此实例中尝试使用填充

.分区{ 宽度：160px； 填充：5px0； 背景颜色：灰色； 显示：内联块； 文本对齐：居中； 字体大小：30px； } .bg灰色左{ 边框左上半径：25px； 边框左下半径：25px； } .bg灰色中间{ 边界半径：0px； } .bg灰色右侧{ 边框右上角半径：25px； 边框右下半径：25px； } .集装箱{ 边框：实心1px灰色； 宽度：485px； } .div:n-child1、.div:n-child2{ 右边框颜色：白色； 右边框宽度：1px； 右边框样式：实心 } -> 第一组 第2组 第3组

---

-> 填充物是跛脚的。某个东西的大小改变，或者某个东西占用了多行，或者任何东西出了问题，那么填充将不再满足您的需要，这只是时间问题。使用flex center更可靠：

div{ 高度：100px； 宽度：200px； 显示器：flex； 证明内容：中心； 对齐项目：居中； 背景：aliceblue； } 居中

---

我想你的意思是，3个div中的任何一个都可以是任意高度，你希望每个div的内容垂直居中，并且每个div保持相同的高度。查看显示：表格和显示：表格单元格。或者flex，或者grid，如果你想写一堆回退的话