如何使两个按钮彼此相邻但位于屏幕中央？

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 示例