还有哪些方法可以在没有边距和位置的情况下将 div 居中?[复制]

What are the other ways to center theese divs without margin and position? [duplicate]

提问人:Adrians Bergmanis 提问时间:7/21/2023 最后编辑:technophyleAdrians Bergmanis 更新时间:7/21/2023 访问量:37

问:

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

你能帮我在不使用的情况下将每个孩子 div 居中吗? 我试图理解为什么我的 css 代码不起作用。margin: auto

CSS 居中 对齐

评论


答:

-1赞 Adri 7/21/2023 #1

您的身体标签缺少其结束“>”

闭上你的身体,它应该居中。

评论

0赞 technophyle 7/21/2023
我的错 - 它在我编辑帖子时被删除了。 刚刚更新。