无法在组件顶部添加边距

Question

我需要构建两个必须可点击的框，例如这些框：

我目前有这个，但是我在问自己许多可以解决的简单问题：

1）我的choice-box组件的高度固定，是否可以相对于页面设置？
2）我该怎样做才能使Upload New File和Download Template文本垂直居中？我试图垂直对齐它们，但是它不起作用...
3）我想在我的Wrong move...文本上方添加一个边距，我尝试了margin-top和padding-top，但是它也不起作用...我认为这是因为我上面的组件（choice-boxes）设置不正确

我是css的新手，所以如果有人可以帮助我，那就太好了！ 这是我的html和css代码：

<div className="choice-box">
  <div className="head-title head-title-choice">
    What are you trying to do ?
  </div>

  <div className="choice-boxes">
    <div className="choice left-choice">
      Upload New File
    </div>

    <div className="choice right-choice">
      Download Template
    </div>
  </div>

  <div className="under-choice">
    Wrong move, get back to Dashboard
  </div>
</div>

然后：

.choice-box{
    background-color: #FFFFFF;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    height: 600px;

    border-radius: 5px;
}

.head-title-choice{
    text-align: center;
    padding-top: 2%;
    font-size: 25px;
}

.choice-boxes{
    width: 100%;
    height: 400px;
}

.choice{
    float: left;
    text-align: center;
    background-color: blue;
    margin-top: 5%;
    height: 100%;
}

.left-choice{
    width: 44.5%;
    margin-left: 5%;
}

.right-choice{
    width: 44.5%;
    margin-left: 1%;
    margin-right: 5%;
}

.under-choice{
    text-align: center;
}

Answer 1

我认为这里没有理由使用float。尝试使用flexbox进行布局，然后使用vh来使高度与窗口成比例。

.choice-box {
  text-align: center;
}

.choice-boxes {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.choice-boxes>* {
  flex: 1 1 auto;
  background: blue;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  color: white;
}

<div class="choice-box">
  <div class="head-title head-title-choice">
    What are you trying to do ?
  </div>
  <div class="choice-boxes">
    <div class="choice left-choice">
      Upload New File
    </div>

    <div class="choice right-choice">
      Download Template
    </div>
  </div>

  <div class="under-choice">
    Wrong move, get back to Dashboard
  </div>
</div>