Html div在另一个垂直元素的中间位置 我试图在每个飞行路线（蓝线）中间对齐飞行持续时间。但是它不起作用，持续时间（1:30）不完全在直线的中间，文本不集中。我怎样才能解决这个问题

HTML:

---

你可以试试表格布局。这有用吗

.line{
宽度：5px；
高度：200px；
显示：表格；
表布局：固定；
文本对齐：居中；
}
.时间{
显示：表格单元格；
垂直对齐：中间对齐；
背景：#777；
高度：10px；
文本对齐：居中；
}
跨度{
背景：#ccc；
填充：10px 0px；
}

下午12:34

似乎每次我想垂直对齐某个对象时，我都会返回到以下链接：

---

我喜欢用例的组织方式。

我再次浏览了您的代码，注意到如果您添加位置：相对于飞行路径，那么transform/top组合可以工作。添加

位置：相对至
。飞行路径
（有关更多详细信息，请参阅）。
<span class="col-md-12 roundtrip">
  <div class="col-md-6 trip">Outbound
    <div class="flight">Los Angeles</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Chicago</div>
    <div class="connection">5hr wait</div>
    <div class="flight">Chicago</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">New York</div>
    <div class="connection">2hr wait</div>
    <div class="flight">New York</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Amsterdam</div>
  </div>
  <div class="col-md-6 trip">Inbound
    <div class="flight">Amsterdam</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Los Angeles</div>
    <div class="flight">Los Angeles</div>
    <div class="flight-path">
      <div class="flight-duration">1-30h</div>
    </div>
    <div class="flight">Amsterdam</div>

  </div>
</span>

.roundtrip {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}
.trip {
  width: 100px;
  text-align: center;
  border: 1px solid black;
  margin: 0px 3px;
  display: flex;
  flex-direction: column;
  margin-right: 50%;
}
.flight {
  white-space: nowrap;
}
.flight-path {
  width: 6px;
  min-height: 85px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
  position: relative;
}
.connection {
  height: 40px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flight-duration {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, .75);
  width: 81px;
  left: -38px;
  text-align: center;
}