如何水平和垂直居中单个项目，但允许其他项目环绕它

Question

我要实现的布局：

概念是让一个元素始终位于容器的中心，然后再将另一个元素粘贴在容器的侧面。如果该侧面元件太宽，则应包裹在主要元件下方，而不会影响对中。

#container {
  width: 400px;
  height: 200px;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#container::before {
  content: '';
  flex: 1;
}

#mainText {
  font-size: 60px;
}

#subText {
  flex: 1;
  font-size: 16px;
  white-space: nowrap;
}

<div id="container">
  <span id="mainText">MAIN</span>
  <span id="subText">sub</span>
</div>

这是我的起点，但是仍然存在很多问题，我仍在摸索如何处理。首先，子文本元素将不能正确换行，即使可以，我也确定垂直/水平居中会被破坏。另外，我不确定如何确保两个文本元素的基线相同。也许flexbox不是这种布局的正确方法？需要明确的是，此布局应适用于任何容器尺寸。硬编码位置将是不可接受的。

Answer 1

您可以使用display: table-cell;

#container {
   width: 400px;
   height: 200px;
   background-color: grey;
   color: white;
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
   text-align:center;
}
#mainText {
  font-size: 60px;
}

#subText {
  flex: 1;
  font-size: 16px;
  white-space: nowrap;
}

<div id="container">
  <span id="mainText">MAIN</span>
  <span id="subText">sub</span>
</div>

Answer 2

这里是一个 approximation ，唯一的要求是知道主标题的宽度，并且子元素不会以换行为中心。

#container {
  width: 400px;
  height: 200px;
  background: 
    linear-gradient(red, red) center/100% 1px no-repeat, 
    linear-gradient(red, red) center/1px 100% no-repeat;
  background-color: grey;
  color: white;
  margin: 10px;
  display: flex;
  align-items: center;
}

#container>div {
  width: 100%;
  font-size:0;
}

#mainText {
  font-size: 60px;
  display: inline-block;
  width: calc(50% + 160px/2); /* 160px is the width */
  text-align: right;
}

#subText {
  font-size: 16px;
  line-height: 0;
  display: inline-block;
}

<div id="container">
  <div>
    <div id="mainText"><span>MAIN</span></div>
    <span id="subText">sub text</span>
  </div>
</div>
<div id="container">
  <div>
    <div id="mainText"><span>MAIN</span></div>
    <span id="subText">sub very long long text</span>
  </div>
</div>