How can I center these three button literally in the of the page?

Question

How can I center these three buttons so all of them literally dead center of the page? Like if the page is 500 × 500, how can I put them in 250 × 250 place?

<!DOCTYPE html>
<html lang="en">
    <div class="game-ui">
    <div class="row-1">
      <input type="button" class="game-btn" id="btn-0.0" value=" ">
      <input type="button" class="game-btn" id="btn-0.1" value=" ">
      <input type="button" class="game-btn" id="btn-0.2" value=" ">
    </div>
    <div class="row-2">
      <input type="button" class="game-btn" id="btn-1.0" value=" ">
      <input type="button" class="game-btn" id="btn-1.1" value=" ">
      <input type="button" class="game-btn" id="btn-1.2" value=" ">
    </div><div class="row-3">
      <input type="button" class="game-btn" id="btn-2.0" value=" ">
      <input type="button" class="game-btn" id="btn-2.1" value=" ">
      <input type="button" class="game-btn" id="btn-2.2" value=" ">
    </div></div>
</html>

score 2 · Answer 1 · answered Oct 07 '21 at 19:20

Using the justify-content: center; align-items: center; properties of flex, you can center it to the dead center of .game-ui.

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

body{
  margin: 0px;
}

<!DOCTYPE html>
<html lang="en">
    <div class="game-ui">
    <div class="row-1">
      <input type="button" class="game-btn" id="btn-0.0" value=" ">
      <input type="button" class="game-btn" id="btn-0.1" value=" ">
      <input type="button" class="game-btn" id="btn-0.2" value=" ">
    </div>
    <div class="row-2">
      <input type="button" class="game-btn" id="btn-1.0" value=" ">
      <input type="button" class="game-btn" id="btn-1.1" value=" ">
      <input type="button" class="game-btn" id="btn-1.2" value=" ">
    </div><div class="row-3">
      <input type="button" class="game-btn" id="btn-2.0" value=" ">
      <input type="button" class="game-btn" id="btn-2.1" value=" ">
      <input type="button" class="game-btn" id="btn-2.2" value=" ">
    </div></div>
</html>

justify-content centers it horizontally, and align-items centers vertically.

How can I center these three button literally in the of the page?

1 Answers1