在 div 中垂直居中文本，同时具有 100% 宽度的 div

Question

所以这可能是一个骗局，但我正在查看其他帖子，这略有不同。

我想将 div 中的文本垂直和水平居中。我让那部分工作正常。我唯一的问题是我有一个 div，它应该有一个纯绿色的粗边框，以 50% 的边框半径填充 100% 的容器。

剩下的一个问题就搞定了。当我切换到显示到表格单元格时，div 的宽度就是文本的宽度。不是容器的宽度。这不是我期望看到的。我在这里有一个 CodePen (https://codepen.io/databell/pen/oNjMVmj)，我将在下面发布代码。它来自 Elementor Page Builder，但它确实可以反映任何类似的 div 关系。

HTML

<div class="elementor-element elementor-element-aedd1c1 core-value elementor-widget elementor-widget-heading">
  <div class="elementor-widget-container">
    <h3 class="elementor-heading-title elementor-size-default">Stack Overflow</h3>
  </div>
</div>

CSS

.elementor-widget-wrap > .elementor-element {
    width: 100%;
}
.core-value .elementor-widget-container {
    height: 320px;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    border-style: solid;
    border-width: 10px;
    border-color: #3FBE9C;
    border-radius: 50%;
}
.core-value h3 {
    width: 100%;
}

Answer 1

这就是你想要的吗？如果是这样，我所做的就是将位置设为绝对位置，以便圆圈填充整个容器，然后将文本与 text-align: center; 对齐。和行高：320px； （与您的身高相同）希望这会有所帮助。

.elementor-widget-wrap > .elementor-element {
    width: 100%;
}
.core-value .elementor-widget-container {
    height: 320px;
    display: table-cell;
    width: 100%;  
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color: #3FBE9C;
    border-radius: 50% 50% 50% 50%;
    position: absolute;
    text-align: center;
    line-height: 320px;
    
}
.core-value h3 {
    width: 100%;
}

<div class="elementor-element elementor-element-aedd1c1 core-value elementor-widget elementor-widget-heading">
  <div class="elementor-widget-container">
    <h3 class="elementor-heading-title elementor-size-default">CodePen Help</h3>
  </div>
</div>