Question

我试图在另一个div / html文档中居中多个div（整个div块），但每次我尝试在StOv上找到的东西时都失败了。

这是我想要做的图片。

编辑：

我很抱歉，但是我使用的是嵌套的jQuery，它对于jsfiddle来说太复杂了，只有我可以做的是链接到我正在使用的文件：http://goo.gl/3kXjK9

这是我的代码：

<div id="device" style="position: relative; height: 971px; width: 100%; margin-left: auto; margin-right:auto;">


    <div class="box size42" data-box="0" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="1" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="2" data-width="107" style="display: block; position: absolute; width: 107px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="3" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="4" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="5" data-width="35" style="display: block; position: absolute; width: 35px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="6" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size62" data-box="7" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="8" data-width="107" style="display: block; position: absolute; width: 107px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="9" data-width="71" style="display: block; position: absolute; width: 71px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="10" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="11" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="12" data-width="35" style="display: block; position: absolute; width: 35px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="13" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="14" data-width="71" style="display: block; position: absolute; width: 71px; height: 107px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="15" data-width="71" style="display: block; position: absolute; width: 71px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="16" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="17" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="18" data-width="35" style="display: block; position: absolute; width: 35px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="19" data-width="71" style="display: block; position: absolute; width: 71px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    <div class="box size22" data-box="20" data-width="71" style="display: block; position: absolute; width: 71px; height: 107px; top: 0px; left: 0px;" data-y="0" data-x="0"></div>

    </div>

Answer 1

通过更改#device CSS：

删除宽度
使用自动边距：

#device {
  width: auto;
  margin: 0 auto;
}

Answer 2

您可以使用以下CSS

来居中

#parent {
    position: relative;
    height: 971px;
    left:0px;
    right:0px;
    margin:auto;
    width:100%;
}

希望这有帮助。：）

Answer 3

由于没有现场演示，我没有太多事情要做，所以这就是我所做的：

使用flexbox，#device1是灵活容器，并控制子.box居中。当然有其他方式来安排它们。
将#device1应用于padding: 10px

body

删除了所有定位属性，这些属性负责显示在一个角落中显示所有.box。
更正了作为CSS属性编写的#device1属性。
请注意保留原始尺寸，因此每个元素的尺寸都与原来尺寸相同。
添加了另一个#device2来展示order的flexbox属性。在#device2 .box上分配了order属性和整数值。相应地安排.box（but only in appearance, in the DOM they are positioned as they are in the code）

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>34593110</title>
  <style>
    html,
    body {
      box-sizing: border-box;
      font: 400 16px/1.45"Verdana";
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 none hlsa(0%, 0, 0, 0);
      outline: 0 none hlsa(0%, 0, 0, 0);
    }
    body {
      position: relative;
      background-color: #111;
      color: #EEE;
      padding: 10px;
    }
    #device {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-align-content: center;
      align-content: center;
      outline: 3px dashed red;
      background-color: hsla(0, 100%, 50%, .3);
    }
    .box {
      outline: 1px solid blue;
      background-color: hsla(240, 100%, 50%, .3);
      font-size: 1.2rem;
      text-align: center;
      color: #FF0;
    }
  </style>
</head>

<body>
  <div id="device" height="971" width="100%" style="margin: 20px auto;">
    <div class="box size42" data-box="0" data-width="35" style="width: 35px; height: 35px;">1</div>
    <div class="box size22" data-box="1" data-width="71" style="width: 71px; height: 35px;">2</div>
    <div class="box size22" data-box="2" data-width="107" style="width: 107px; height: 71px;">3</div>
    <div class="box size22" data-box="3" data-width="35" style="width: 35px; height: 35px;">4</div>
    <div class="box size22" data-box="4" data-width="71" style="width: 71px; height: 35px;">5</div>
    <div class="box size22" data-box="5" data-width="35" style="width: 35px; height: 71px;">6</div>
    <div class="box size22" data-box="6" data-width="71" style="width: 71px; height: 35px;">7</div>
    <div class="box size62" data-box="7" data-width="35" style="width: 35px; height: 35px;">8</div>
    <div class="box size22" data-box="8" data-width="107" style="width: 107px; height: 35px;">9</div>
    <div class="box size22" data-box="9" data-width="71" style="width: 71px; height: 71px;">10</div>
    <div class="box size22" data-box="10" data-width="35" style="width: 35px; height: 35px;">11</div>
    <div class="box size22" data-box="11" data-width="71" style="width: 71px; height: 35px;">12</div>
    <div class="box size22" data-box="12" data-width="35" style="width: 35px; height: 71px;">13</div>
    <div class="box size22" data-box="13" data-width="71" style="width: 71px; height: 35px;">14</div>
    <div class="box size22" data-box="14" data-width="71" style="width: 107px; height: 71px;">15</div>
    <div class="box size22" data-box="15" data-width="71" style="width: 71px; height: 71px;">16</div>
    <div class="box size22" data-box="16" data-width="35" style="width: 35px; height: 35px;">17</div>
    <div class="box size22" data-box="17" data-width="71" style="width: 71px; height: 35px;">18</div>
    <div class="box size22" data-box="18" data-width="35" style="width: 35px; height: 71px;">19</div>
    <div class="box size22" data-box="19" data-width="71" style="width: 71px; height: 71px;">20</div>
    <div class="box size22" data-box="20" data-width="71" style="width: 107px; height: 71px;">21</div>
  </div>

  <div id="device" height="971" width="100%" style="margin-left: auto; margin-right:auto;">
    <div class="box size42" data-box="0" data-width="35" style="width: 35px; height: 35px; order: 11;">1</div>
    <div class="box size22" data-box="1" data-width="71" style="width: 71px; height: 35px; order: 20;">2</div>
    <div class="box size22" data-box="2" data-width="107" style="width: 107px; height: 71px; order: 1;">3</div>
    <div class="box size22" data-box="3" data-width="35" style="width: 35px; height: 35px; order: 12;">4</div>
    <div class="box size22" data-box="4" data-width="71" style="width: 71px; height: 35px; order: 13;">5</div>
    <div class="box size22" data-box="5" data-width="35" style="width: 35px; height: 71px; order: 2;">6</div>
    <div class="box size22" data-box="6" data-width="71" style="width: 71px; height: 35px; order: 14;">7</div>
    <div class="box size62" data-box="7" data-width="35" style="width: 35px; height: 35px; order: 15;">8</div>
    <div class="box size22" data-box="8" data-width="107" style="width: 107px; height: 35px; order: 19;">9</div>
    <div class="box size22" data-box="9" data-width="71" style="width: 71px; height: 71px; order: 3;">10</div>
    <div class="box size22" data-box="10" data-width="35" style="width: 35px; height: 35px; order: 16;">11</div>
    <div class="box size22" data-box="11" data-width="71" style="width: 71px; height: 35px; order: 18;">12</div>
    <div class="box size22" data-box="12" data-width="35" style="width: 35px; height: 71px; order: 4;">13</div>
    <div class="box size22" data-box="13" data-width="71" style="width: 71px; height: 35px; order: 16;">14</div>
    <div class="box size22" data-box="14" data-width="71" style="width: 107px; height: 71px; order: 9;">15</div>
    <div class="box size22" data-box="15" data-width="71" style="width: 71px; height: 71px; order: 5;">16</div>
    <div class="box size22" data-box="16" data-width="35" style="width: 35px; height: 35px; order: 17;">17</div>
    <div class="box size22" data-box="17" data-width="71" style="width: 71px; height: 35px; order: 21;">18</div>
    <div class="box size22" data-box="18" data-width="35" style="width: 35px; height: 71px; order: 7;">19</div>
    <div class="box size22" data-box="19" data-width="71" style="width: 71px; height: 71px; order: 6;">20</div>
    <div class="box size22" data-box="20" data-width="71" style="width: 107px; height: 71px; order: 10;">21</div>
  </div>

</body>

</html>

如何将div中的多个div居中

3 个答案: