html - 将 child 置于比自身更窄的 parent 中

Question

所以我想出了一种方法，可以让 child 在比自己小的父对象中居中。我不热衷于完成所需的额外标记，我想知道是否有更好的方法来完成此操作，更好的意思是更少的额外标记/样式，或者总体上“更干净”。

目标

给定一个较小(较窄)的父元素，在不知道子元素或父元素的宽度的情况下，动态地将子元素的中心放在父元素的中心。

我的方法

所以我的方法使用了三个嵌套的跨度(元素本身影响不大)。

第一个跨度有一个 width的 0px并通过 margin: 0 auto 居中.这为我们提供了父容器的中心。

第二个跨度有一个 width的 auto , 一个 white-space的 nowrap , 和一个 display的 inline-block . display是这里的关键。这样就恢复了子元素的自然宽度

第三个跨度有一个 position亲戚，和一个left的 -50% .通过相对于父级中心偏移子级宽度的一半，使跨度相对于父级居中。

问题

是否有更清洁/更“简陋”的方式来做到这一点？

标记

<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>

风格

.box { 
  border: 1px solid red;
  width: 20px;
  height: 20px;

  margin: 40px auto;
}

.box .first-wrap {
  display: block;
  width: 0px;
  margin: 0 auto;
  border: 1px solid blue;
}

.box .first-wrap .second-wrap {
  display: inline-block;
  white-space: nowrap;
  width: auto;
  border: 1px solid green;
}

.box .first-wrap .second-wrap .third-wrap {
  position: relative;
  left: -50%;
  border: 1px solid black;
}

fiddle

https://jsfiddle.net/d3w1wom0/

Answer 1

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

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

如果你想改变宽度，并相应地居中，你可以将以下内容添加到上面的 .box 类中:

width: 60%;
margin: 0 auto;