如何将两个按钮彼此相邻但屏幕中心？

Question

这绝对是一个基本问题，但我试图在Ionic中做到这一点。我一直在尝试

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

这么多东西，但它没有用，有帮助吗？

更新：所以我尝试了其中一个解决方案，这是我的CSS，但它仍然无法正常工作，它的中心，但一直在顶部< / p>

.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

Answer 2

我对标志性框架没有经验。但我认为以下建议可能会奏效，请尝试一下： 1）您可以尝试<center>标记 2）或者您可以尝试left:50%;（设置左边距）

Answer 3

我决定做

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

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

不确定这是一个多么好的约定，但它似乎将它体现在不同的设备上