Getting div to be exactly center of page

January 26, 2023

centering the div to be center to the webpage.

This has been asked a hundred times before, and yet I’m still having trouble finding the exact answer.

I’m trying to center this div exactly center of the page. I’ve set justify-content and align-items to center, but it not showing the expected result. I’m sure I’m missing something, but what?

body {
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  width: 50vh;
  height: auto;
}

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

.buttons {
  display: flex;
  padding: 10px;
  margin-top: 10px;
}

<div class="box">
  <div class="content">
    <h1 class="header">BLACKJACK</h1>
    <p id="message-el" class="message">What to play a round? </p>
    <p id="cards-el" class="cards">Cards:</p>
    <p id="sum-el" class="sum">Sum:</p>
    <div class="buttons">
      <button id="button-start-el" class="button-start">START GAME</button>
      <button id="button-draw-el" class="button-draw">DRAW CARD</button>
      <button id="button-new-el" class="button-new">NEW GAME</button>
    </div>
  </div>
</div>

<script src="/js/javascript.js"></script>
</body>

>Solution :

Set body to 100vh and add align-items: center;.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
  width: max-content;
  padding: 1em 2em;
  height: auto;
}

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

.buttons {
  display: flex;
  padding: 10px;
  margin-top: 10px;
}

<body>
<div class="box">
  <div class="content">
    <h1 class="header">BLACKJACK</h1>
    <p id="message-el" class="message">What to play a round? </p>
    <p id="cards-el" class="cards">Cards:</p>
    <p id="sum-el" class="sum">Sum:</p>
    <div class="buttons">
      <button id="button-start-el" class="button-start">START GAME</button>
      <button id="button-draw-el" class="button-draw">DRAW CARD</button>
      <button id="button-new-el" class="button-new">NEW GAME</button>
    </div>
  </div>
</div>

<script src="/js/javascript.js"></script>
</body>