将元素相对于另一个元素垂直居中放置

Question

我有以下代码段

def render(self, screen):
    screen.fill((0, 0, 0))
    for i in range(20):
        pygame.draw.line(screen, (255, 255, 255), (0, 30*i), (600, 30*i))
        pygame.draw.line(screen, (255, 255, 255), (30*i, 0), (30*i, 600))
    self.food.render()
    self.snake.render()
    pygame.display.flip()

body {
  margin: 0 auto;
  min-width: 480px;
  padding: 0;
  width: 800px;
}

@media (max-width: 840px) {
  body {width: 95%; }
}

div.top-header-cont {
  display: flex;
}

header {
  display: inline-block;
  width: auto;
}

div .theme-select-cont {
  display: inline-block;
  flex-grow: 100;
}

div .theme-select-table-wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

div .theme-select-table-cell-wrapper {
  display: table-cell;
  vertical-align: middle;
}

在浏览器中看起来像这样 我怀疑我可以更轻松地完成同样的工作，我的意思是将 <div class="top-header-cont"> <header> <h1>TODO</h1> </header> <div class="theme-select-cont"> <div class="theme-select-table-wrapper"> <div class="theme-select-table-cell-wrapper"><select> <option value="base16-dark">base16-dark</option> </select></div> </div> </div> </div> 元素相对于select元素垂直居中放置在页面的右侧。我不知道没有表包装器怎么办。或者，也许是另一种没有h1 div元素的方式。无论如何，对于这样的简单任务，我的变体看起来都太复杂了，例如在页面顶部放置两个元素。您有什么建议可以解决这个问题？我已经看到了一些使用绝对div定位的解决方案，但这对我来说不合适。

Answer 1

您可以使用绝对位置并进行转换：如果2个元素由相对位置相同的包装器绑定，则translateY（-50％）可以垂直居中。

只需相对于标头位置，将select元素放在h1之后，然后为其指定目标类即可。

<header>
   <h1>TODO</h1>
   <select class="select-box">
      <option value="base16-dark">base16-dark</option>
   </select>
</header>

header{
  position:relative;
}

.select-box{
    position:absolute;
    top:50%;
    right:2rem;
    transform:translateY(-50%);
}

您可能会发现现在更容易平衡它。请记住，绝对项目并不真正了解周围的元素，因此如果您不能正确处理断点，它们可能会重叠。

您也可以使用grid进行此操作，但是在完全支持grid之前，我将不提供示例。