将父母的孩子置于比自己更窄的地方

Question

因此，我想出了一种方法，将孩子置于比自己小的父母身边。我不想热衷于完成所需的额外标记，我想知道是否有更好的方法来实现这一目标，更好的意义是更少的额外标记/样式，或者一般的“更清洁”。

目标

给定较小（较宽）的父元素，将子元素的中心动态地放在父元素的中心，而不知道子元素或父元素的宽度。

我的方法

所以我的方法使用了三个嵌套的跨度（元素本身没什么影响）。

第一个范围的width为0px，并通过margin: 0 auto居中。这为我们提供了父容器的中心。

第二个范围的width为auto，white-space为nowrap，display为inline-block。 display是关键所在。这将恢复子元素的自然宽度

第三个范围的相对position和left的{​​{1}}。这通过相对于父级中心偏移子项宽度的一半来使跨度相对于父级居中。

问题

是否有更清洁/更少“笨拙”的方式呢？

THE MARKUP

-50%

THE STYLES

<div class="box">
  <span class="first-wrap">
    <span class="second-wrap">
      <span class="third-wrap">
         This should be centered in relation to the box;
      </span>
    </span>
  </span>
</div>

THE FIDDLE

https://jsfiddle.net/d3w1wom0/

Answer 1

只需删除您的css并替换为以下内容：

.box {
display: flex;
justify-content: center;
border: 1px solid black; 
}

如果您想更改宽度，并相应地居中，您只需将以下内容添加到上面的.box类中：

width: 60%;
margin: 0 auto; 

Answer 2

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

将文字置于框

中心