-1

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Page title</title>

  <style>
    html,
    body {
      height: 100%;
      background: green;
      margin: 0;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #container {
      width: 80%;
      height: 90%;
      background: linear-gradient(#134a3b, #145040);
      display: flex;
      flex-direction: column;
    }
    
    .child {
      width: 80%;
      height: 45%;
      background: red;
      align-self: center;
      justify-self: center;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="inputs" class="child">
      <input id="input">
    </div>
    <div id="outputs" class="child"></div>
  </div>
</body>

</html>

Can you please help me center each child div without using margin: auto? I am trying to understand why my css code is not working.

technophyle
  • 7,972
  • 6
  • 29
  • 50
Adrians Bergmanis
  • 1
  • 1

1 Answers1

-1

your body tag is missing its closing ">"

close your body and it should be centered.

Adri
  • 13
  • 5