使用css`after在应用于元素的边框内居中`

我想在之后使用

创建一个带边框的元素，并将文本附加到该元素。文本需要在边框内居中，以显示为按钮。当前文本位于底部。我试着用了一个，但它只是水平居中的文字

#wrapper {
  background-image: none;
  border:1px solid #021a40 !important;
  left: 0px !important;
  top: 115px !important;
  &:after {
    content: 'Some Text';
    display: -webkit-flex;
    display:         flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }


如果我在文本所在的
后面的
中添加填充，它会将边框向外展开。。。并且不会将文本放在边框的中心：

填充底部：15px


<>我如何将文本放在边框的中间？


此外，如果我尝试使用
边距左/右：自动
居中，它会将文本放置在左下角：

  &:after {
    content: 'Some Text';
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

您可以使用
显示：表
属性

但是，如果您有
position:absolute
，这将不起作用。假设您需要使用它，您必须将
#wrapper
包装在另一个包装中，并将定位属性放在那里

#wrapper {
  display: table;
  background-image: none;
  border:1px solid #021a40 !important;
  left: 0px !important;  <--- you need to declare `position` for these to work
  top: 115px !important;   <--- you need to declare `position` for these to work
  &:after {
    content: 'Some Text';
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }

#包装器{
显示：表格；
背景图像：无；
边框：1px实心#021a40！重要；
左：0px！重要；您可以尝试以下操作：

#wrapper {
  background-image: none;
  border:1px solid #021a40 !important; 
  position:relative; /*add this*/
  &:after {
    content: 'Some Text';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
  }

父元素的高度是否固定？字符串的长度是否始终固定？