Not able to vertically center a div

Question

I've been trying to vertically center a div, tried both position: absolute and flexbox, neither worked.

Also tried to add styles to both the parent div and child divs, still did not work. It centers horizontally but does not center vertically

here's the HTML for the parent element

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

here's the CSS for the parent element

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

Thank you!

can you update your question with how the "renderQuestions" looks like — DanteDX, Sep 21 '22 at 04:58

score 0 · Answer 1 · answered Sep 21 '22 at 04:58

You need to assign a height then it will work. Try the below code.

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

score 0 · Answer 2 · answered Sep 21 '22 at 04:59

I like to do it with display: flex;. Source: 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>

Not able to vertically center a div

2 Answers2