将输入元素置于 Flex 容器中居中

Question

我使用弹性容器来放置一个按钮，以便它紧邻其右边框上的输入。我无法让输入水平居中。如何将其居中而不消除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/

Answer 1

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

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

小提琴更新