Horizontally and vertically flexbox css not working

Question

I'm trying to center the below HTML vertically and horizontally but it's not working vertically, only horizontally. Please could someone help explain why it's not working?

<body>
    <header class="nav">
        <img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
        <a class="home-anchor" href="./index.html">Learn</a>
    </header>
        <div class="quiz-container">
            <p class="word-to-conjugate" id="randomWord"></p>
            <input type="text" id="userGuess">
            <button class="answer-button" id="checkAnswer">Answer</button>
        </div>
</body>

My CSS using flexbox trying to center the quiz horizontally and vertically

.quiz-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.word-to-conjugate {
    font-size: 2rem;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}

input {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 10px;
    font-size: 1.5rem;
    border: 1px solid #333;
    border-radius: 5px;
    margin-bottom: 20px;
}

.answer-button {
    background-color: #505FDF;
    font-size: 1.5rem;
    text-align: center;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 3%;
}

Can you provide an executable example and be mroe specific about what doesn't work? — Sagi Rika, Nov 24 '19 at 08:24

score 0 · Answer 1 · answered Nov 24 '19 at 08:24

p, input, button are already centered with respect to their parent: .quiz-container

Maybe you are looking for it to be centered with respect to the complete screen/viewport. In that case you need to set the min-height of html, body and quiz-container to 100%.

Now .quizcontainer has 100% height and its children will be centered both vertically and horizontally.

body, html{
  min-height: 100%; /*add this*/
}
 .quiz-container {
  min-height: 100%; /*add this*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.word-to-conjugate {
  font-size: 2rem;
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
}

input {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  padding: 10px;
  font-size: 1.5rem;
  border: 1px solid #333;
  border-radius: 5px;
  margin-bottom: 20px;
}

.answer-button {
  background-color: #505FDF;
  font-size: 1.5rem;
  text-align: center;
  color: #FFFFFF;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 3%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <header class="nav">
      <img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
      <a class="home-anchor" href="./index.html">Learn</a>
  </header>
      <div class="quiz-container">
          <p class="word-to-conjugate" id="randomWord"></p>
          <input type="text" id="userGuess">
          <button class="answer-button" id="checkAnswer">Answer</button>
      </div>
</body>
</html>

score 0 · Accepted Answer · answered Nov 24 '19 at 08:25

That's because you have nothing making the quiz-container aligning vertically.

See example below, trick is to add a wrapper around your quiz element which aligns it vertically. Lastly, be sure to set the height of html, body and wrapper element to 100%;

html,
body,
.wrapper {
  height: 100%;
}

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

.quiz-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.word-to-conjugate {
    font-size: 2rem;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}

input {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding: 10px;
    font-size: 1.5rem;
    border: 1px solid #333;
    border-radius: 5px;
    margin-bottom: 20px;
}

.answer-button {
    background-color: #505FDF;
    font-size: 1.5rem;
    text-align: center;
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 3%;
}

<body>
    <header class="nav">
        <img class="icon" src="./img/eiffel-tower.svg" attr="Icon made by Monkik from www.flaticon.com">
        <a class="home-anchor" href="./index.html">Learn</a>
    </header>
      <div class="wrapper">
        <div class="quiz-container">
            <p class="word-to-conjugate" id="randomWord"></p>
            <input type="text" id="userGuess">
            <button class="answer-button" id="checkAnswer">Answer</button>
        </div>
      </div>
</body>

Right! Thanks, it's working now. Although with my nav I've set the height to 90% otherwise it doesn't appear center but further down because of the nav height. — Sean Boulanger, Nov 24 '19 at 08:32
@SeanBoulanger - you can also set your nav to `position: absolute`, and keep `height: 100%` on body, html and wrapper elements to keep vertical alignment perfectly centered. You might need to add `left:0; right:0;` to your nav and specify its `height` to keep it full width at the top of your screen. — Ludo, Nov 24 '19 at 08:57

Horizontally and vertically flexbox css not working

2 Answers2