How to center a div within another; center an input field and button

Question

I am looking to center a div within another div. To be more specific, I am having problems center the input field and button to center of the screen. Also, I would like to have them on top of each other in the center. Such as, the input field will be on top and the button will be at the bottom.

/* Write your CSS code in this file */

body {
  width: 100%;
  background-color: red;
}

.header-1 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: aliceblue;
  text-align: center;
}

h2 {
  text-align: center;
  margin-top: 5%;
}

#submit {
  width: 70px;
  height: 20px;
}

.container-master {
  margin: 5%;
  display: flex;
}

.container-child {
  justify-content: center;
}

li {
  display: inline;
}

<h1 class="header-1">Johnny's Guessing Game</h1>
<h2>Previous Guesses</h2>
<div class="container-1">
  <ul id="guessList">
    <ll id="listItem"> </ll>
  </ul>
</div>
<div class="container-master">
  <div class="containter-child">
    <input type='text' id="guessBox" placeholder="Enter Guess Here">
    <button id="submit">Submit</button>
  </div>
</div>
<h4 id="error"></h4>

Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Achtung, Jan 05 '21 at 21:58
That post is a bit old but same ideas work now. You should go with the flex box answer. — Achtung, Jan 05 '21 at 22:00

s.kuznetsov · Answer 1 · 2021-01-05T22:09:09.607

Add justify-content: center to .container-master. Also, add this ruleset to your css:

.containter-child {
    flex-direction: column;
    display: inherit;
}

Do you need such a result?

body{
    width: 100%;
    background-color: red;
}

.header-1 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: aliceblue;
    text-align: center;
}

h2 {
    text-align: center;
    margin-top: 5%;
}

#submit {
    width: 70px;
    height: 20px;
   
}

.container-master {
    margin: 5%;
    display: flex;
    justify-content: center;
}

.containter-child {
    flex-direction: column;
    display: inherit;
}

li {
    display: inline;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Guessing Game</title>
    <link rel="stylesheet" href="main.css">
    
    
  </head>

  <body>


    <h1 class="header-1">Johnny's Guessing Game</h1>
    <h2>Previous Guesses</h2>

    <div class="container-1">
      <ul id="guessList">
        <ll id = "listItem"> </ll>
      </ul>

    </div>

    <div class="container-master">
      <div class="containter-child">
        <input type = 'text' id="guessBox" placeholder="Enter Guess Here">
        <button id="submit">Submit</button>
        </div>
    </div>
      <h4 id="error"></h4>

    <script src="js/guessing-game.js"></script>
  </body>

</html>

How to center a div within another; center an input field and button

1 Answers1