html - 如何使两个按钮彼此相邻但居中居中？

Question

这绝对是一个基本问题，但我正尝试在 Ionic 中解决这个问题。我一直在努力

margin: 0 auto;
text-align: center;
position: relative; 

这么多东西，但它不起作用，求助？

更新:所以我尝试了其中一种解决方案，这是我的 CSS，但它仍然无法正常工作，它位于中心，但一直位于顶部

.square{
    width: 25vw;
    height: 8vw;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

HTML:

<div class="container"
    <div class="button-wrapper">
        <button class="button button-outline square button-calm">
            Male
        </button>
        <button class="button button-outline square button-royal">
            Female
        </button>
    </div>
</div>

Answer 1

您可以使用 flexbox 来实现这一点。首先将按钮包裹在容器中:

<div class="container">
  <div class="button-wrapper">
    <button class="male">Male</button>
    <button class="female">Female</button>
  </div>
</div>

然后，在 CSS 中，对容器的子项应用垂直和水平居中:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Codepen example