分段中垂直对齐的内容（语义 UI）

Question

有没有办法让段类 div 中的内容垂直居中？我有以下标记：

<div class="stretched row">
  <div class="two wide column">
    <div class="ui basic segment">
      <select>
        <!-- OPTION VALUES IN HERE -->
      </select>
    </div>
  </div>
  <div class="column">
    <div class="ui basic segment>
     <!-- DIV CONTENT -->
    </div>
  </div>
  <div class="column">
    <div class="ui basic segment">
      <!-- DIV CONTENT -->
    </div>
  </div>

现在，感谢 stretched row 类，所有 3 列都具有相同的高度，其中的段 div 也是如此，如下所示：

我希望这 3 个片段内的内容在它们内部垂直居中。相反，它们总是出现在顶部。我已尝试添加 class="ui 中间对齐基本段"，但它不起作用。将 class="middle aligned column" 添加到父列中，使它们内部的段居中，但它们不会占用列的所有垂直空间，并且由于它们具有边框和彩色背景，因此看起来很奇怪（每个部分都有自己的高度）。

我想避免在段中添加填充，因为我不知道它们的高度，并且它的内容从 1 行（选择）到几行文本（从 2 到 7 行，具体取决于用户选择的内容）。

谢谢！

Answer 1

正如@VXp 建议的那样，将{display: flex; align-items: center} 应用于段类效果很好。