Html 如何垂直居中对齐内联块元素

我知道以前有人问过这个问题，但没有一个答案对我有帮助。我使用了

垂直对齐：中间和
线高：正常但它们不起作用。我希望
modal body
div中的内容垂直居中对齐。谢谢你的帮助。
这是我的密码：

<div id="modal">
    <div class="modal-header">
      <div class="title">Please leave your feedback!</div>
    </div>
    <div class="modal-body">
      <div class="rate">
    <input type="radio" id="star5" name="rate" value="5" />
    <label for="star5" title="text">5 stars</label>
    <input type="radio" id="star4" name="rate" value="4" />
    <label for="star4" title="text">4 stars</label>
    <input type="radio" id="star3" name="rate" value="3" />
    <label for="star3" title="text">3 stars</label>
    <input type="radio" id="star2" name="rate" value="2" />
    <label for="star2" title="text">2 stars</label>
    <input type="radio" id="star1" name="rate" value="1" />
    <label for="star1" title="text">1 star</label>
     </div>
    </div>
        <input id="submitfeedback" type="submit" value="Submit">
  </div>

请尝试以下代码，可能会对您有所帮助

.modal-body {
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.rate {
    display: inline-flex;
    height: 46px;
    align-items: center;
    padding: 0 10px;
    background: red;
    width: 100%;
    justify-content: space-between;
}

.rate，模态体中的项已居中。“速率”中的输入框和标签没有垂直居中，因为它没有任何样式使其居中。我已经更新了你的html，并添加了一些样式，使其成为中心


.rate{
高度：46px；
填充：0 10px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

请留下您的反馈！
五星
四星
三星
双星
一颗星
，（投票以“需要更多关注”结束，因为在所有可能和不可能的情况下使用CSS来集中内容，这是一个已经被讨论过多次的话题。）这是否回答了您的问题？
.modal-body {
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.rate {
    display: inline-flex;
    height: 46px;
    align-items: center;
    padding: 0 10px;
    background: red;
    width: 100%;
    justify-content: space-between;
}