不能在两个元素之间垂直居中[重复]答案

【问题标题】：Can't center vertically between 2 elements [duplicate]不能在两个元素之间垂直居中[重复]
【发布时间】：2017-10-10 13:24:53
【问题描述】：

我试图在 2 个 textarea 元素之间垂直居中一个按钮，我把 div 的高度和内部 div 的 vertical-align: middle; 相同，但它不能正常工作。

希望你能帮忙，这是我的代码：

#in {
  display: inline-block;
  vertical-align: middle;
  height: 200px;
}

#out {
  height: 200px;
}

<div id="out">
  <textarea rows="10" cols="40"></textarea>
  <div id="in">
    <input type="button" value="switch">
  </div>
  <textarea rows="10" cols="40"></textarea>
</div>

【问题讨论】：

这个问题已经被问过很多次了。例如：stackoverflow.com/questions/79461/…
关于如何垂直对齐的类似问题有数百个——在 google 中进行简单搜索即可找到许多答案。请在发布问题之前进行一些搜索/研究
@Pete - 小心点。涉及 textarea 元素的垂直对齐在浏览器之间不一致。一般的解决方案可能效果不佳。
@Alohci 许多答案包括垂直对齐的 flexbox 版本，我想如果它足以成为公认的答案，那么它就足以成为一个副本，唯一需要注意的是被带到这里是为了让 OP 在发布一个被问过一百万次的问题之前做一些实际的研究。除了问题是询问如何在 2 个文本区域之间垂直对齐按钮，而不是如何垂直对齐文本区域。也许您在阅读问题时应该更加小心
@Pete。这不是垂直对齐的工作方式。您不会单独垂直对齐元素，而是垂直对齐行框中的所有元素彼此。我同意一些垂直 centering 选项可以可靠地工作，包括 flexbox。我只是说选择比通常情况下更有限。

标签： html css

【解决方案1】：

您可以使用 flexbox 来实现此目的。使用vertical-align: middle 只会影响内联元素。

如果完全需要展示，则必须始终努力为元素使用高度，而不是布局对齐。

#in {
  display: inline-block;
  vertical-align: middle;
}

#out {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 200px;
}

<div id="out">
  <textarea rows="10" cols="40"></textarea>
  <div id="in">
    <input type="button" value="switch">
  </div>
  <textarea rows="10" cols="40"></textarea>
</div>

【讨论】：