html - 仅包装上的中心按钮

Question

我想知道是否有一种方法可以只用 CSS 来做到这一点，但到目前为止我还没有真正找到任何东西。

我有几个按钮，它们在一个响应式容器中彼此内嵌。

但是，当它们换行时，第二个按钮掉到新的一行，然后我想将它们居中。有人知道仅使用 css 是否可行？

一个 fiddle 基本上显示了我正在寻找的东西:https://jsfiddle.net/5bvmnt3j/

在 fiddle 中假装包装器是响应式的，随着浏览器宽度的变化，并使按钮换行，我们得到了我在 wrapper2 类中显示的布局，而不是原始包装器类中看到的布局。

我知道通常情况下，这并不是您希望使用纯 css 解决方案看到的东西，但我已经看到 flexbox 的一些非常酷的东西，类似于我要问的东西。 (例如 Center div on wrapping (when it doesn't fit on the line))

希望避免使用JS检测高度变化然后切换类。谢谢。

.wrapper {
  background: red;
  width: 300px;
}
.wrapper2 {
  background: blue;
  margin-top: 30px;
  text-align: center;
  width: 150px;
}
button {
  width: 100px;
}

<div class="wrapper">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>

<div class="wrapper2">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>

Answer 1

您可以使用 flexbox 和媒体查询来做到这一点:

jsFiddle

.wrapper {
  display: flex;
  background: red;
  width: 500px;
}
button {
  margin: 5px;
  padding: 5px;
  width: 100px;
}
@media ( max-width: 700px ) {
  .wrapper { flex-direction: column; align-items: center; }
}

<div class="wrapper">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>