Question 212711 in CSS Question posted in
Some basic documentation can be found here.

Css – What are the other ways to center theese divs without margin and position?

<!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.

Tags:

2

Answers


  1. 0

    Centering elements without using margin and position can be achieved using different CSS techniques. Here are a few alternative methods to center the child divs:

    1. Flexbox with margin: auto:

    You can use display: flex on the parent container and set margin: auto on the child elements. This will automatically center the child elements within the parent container.

    #container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Other styles... */
}

.child {
  width: 80%;
  height: 45%;
  background: red;
  margin: auto; /* This will center the child divs */
}
    1. Flexbox with top, right, bottom, left properties:

    Another way to center the child elements within the parent container using flexbox is by setting position: relative on the parent container and using top, right, bottom, left properties on the child elements.

    #container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Other styles... */
}

.child {
  width: 80%;
  height: 45%;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* This will center the child divs */
}
    1. Grid with place-items property:

    You can use CSS grid layout to center the child elements. Set display: grid on the parent container and use place-items: center to center the items both horizontally and vertically.

    #container {
  display: grid;
  place-items: center;
  /* Other styles... */
}

.child {
  width: 80%;
  height: 45%;
  background: red;
  /* This will center the child divs */
}

    All three methods will center the child divs within the #container div without using margin and position. Choose the one that suits your needs and fits well into the overall layout of your webpage.

    Login or Signup to reply.
  2. 0

    your body tag is missing its closing ">"

    close your body and it should be centered.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search