無法垂直居中 div

Question

我一直在嘗試將 div 垂直居中，嘗試了position: absolute和 flexbox，均未成功。

還嘗試將 styles 添加到父 div 和子 div，仍然沒有工作。 它水平居中但不垂直居中

這是父元素的 HTML

<div className="all-questions">{renderQuestions}</div>

這是父元素的 CSS

.all-questions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

謝謝！

Answer 1

您需要指定一個高度，然后它才會起作用。 試試下面的代碼。

.all-questions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Answer 2

我喜歡用display: flex; . 來源：MDN

 * { margin: 0; padding: 0; }.container { height: 100vh; width: 100vh; background: gray; display: flex; justify-content: center; /* center it horizontally (cross axis) */ align-items: center; /* center it vertically (main axis) */ }.v-centered { height: 40px; width: 40px; background: white; }

 <div class="container"> <div class="v-centered"></div> </div>