html - 我的主容器在使用 flexbox 时没有覆盖整个页面，即使我尝试居中也坐在左边

我希望整个容器水平居中，但我发现在这样做之前，它位于左侧并且没有覆盖整个页面。我究竟做错了什么？我没有正确设置页面宽度吗？还是我用错了 flexbox？

body {
  height: 100vh;
  width: 100vh;
  font-size: 16px;
  /*or 1 em*/
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: space-between;
  border: 3px solid yellowgreen;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Twitch Tv Project</title>
  <link rel="stylesheet" href="twitchcss.css">

  <!--jquery link-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
</head>

<body>
  <div class="container">
    <!--main container-->

    <div class='mainCont'>
      <!--heading container-->
      <h3 id="twitchHead">TWITCH STREAMERS</h3>
    </div>
    <!--end of heading container-->

    <div class='onlineContainer'>
      <div id="imgFirst"></div>
      <div id="textSecond"></div>
    </div>
    <!--end of online container-->

    <div class='offlineContainer'>
      <div id="imgFirst1"></div>
      <div id="textSecond1"></div>
    </div>
    <!--end of offline container-->
  </div>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Twitch Tv Project</title>
    <link rel="stylesheet" href="twitchcss.css">

    <!--jquery link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
  </head>

  <body>
    <div class="container">
      <!--main container-->

      <div class='mainCont'>
        <!--heading container-->
        <h3 id="twitchHead">TWITCH STREAMERS</h3>
      </div>
      <!--end of heading container-->

      <div class='onlineContainer'>
        <div id="imgFirst"></div>
        <div id="textSecond"></div>
      </div>
      <!--end of online container-->

      <div class='offlineContainer'>
        <div id="imgFirst1"></div>
        <div id="textSecond1"></div>
      </div>
      <!--end of offline container-->
    </div>
    <script type="text/javascript" src="twitchjs.js"></script>

  </body>

  </html>

</body>

</html>

最佳答案

将body的宽度更改为100vh为100vw或100%为vh 等于视口(viewport)高度的 1%，vw 等于视口(viewport)宽度的 1%。然后在.container中添加width: 100%。查看代码片段以更好地理解。

body {
  height: 100vh;
  width: 100vw;
  font-size: 16px;
  position: relative;
  /*or 1 em*/
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px solid yellowgreen;
  width: 100%;
}

<html>

  <head>
    <meta charset="UTF-8">
    <title>Twitch Tv Project</title>
    <link rel="stylesheet" href="twitchcss.css">

    <!--jquery link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
  </head>

  <body>
    <div class="container">
      <!--main container-->

      <div class='mainCont'>
        <!--heading container-->
        <h3 id="twitchHead">TWITCH STREAMERS</h3>
      </div>
      <!--end of heading container-->

      <div class='onlineContainer'>
        <div id="imgFirst"></div>
        <div id="textSecond">Second</div>
      </div>
      <!--end of online container-->

      <div class='offlineContainer'>
        <div id="imgFirst1"></div>
        <div id="textSecond1">Third</div>
      </div>
      <!--end of offline container-->
    </div>
    <script type="text/javascript" src="twitchjs.js"></script>

  </body>

  </html>

</body>

</html>

希望对你有帮助

关于html - 我的主容器在使用 flexbox 时没有覆盖整个页面，即使我尝试居中也坐在左边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49225502/

html - 我的主容器在使用 flexbox 时没有覆盖整个页面，即使我尝试居中也坐在左边

上一篇：jquery - 仅在未悬停的图像中显示叠加层

下一篇：html - Angularjs 表 nth-of-type