在 flex 容器中居中输入元素答案

【问题标题】：center an input element in a flex container在 flex 容器中居中输入元素
【发布时间】：2017-03-12 19:22:36
【问题描述】：

我正在使用一个 flex 容器来放置一个按钮，以便它在其右边框上邻接输入。我无法让输入水平居中。如何在不消除display: flex的情况下居中？

.flexContainer {
  display: flex;
}

<div style="text-align:center">
  <div>Enter the search term</div>
  <div style="text-align: center">
    <div class="flexContainer">
      <input id="abc" />
      <button id="search" name="search" type="submit">go</button>
    </div>
  </div>
</div>

这是小提琴：https://jsfiddle.net/wpd3b0kt/1/

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

只需在 CSS 中添加 justify-content:：

 .flexContainer {
        display: flex;
        justify-content: center;
  }

fiddle update

【讨论】：