如何将div中的多个div居中

I tried to center multiple divs (whole block of divs) inside another div/html document, but I failed every time I tried something I found here on StOv.

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

Here is a pic of what I'm trying to do.

这是我正在尝试做的图片。

Edit:

编辑：

I am sorry but, I am using nested jQuery and it is too complex for jsfiddle, only I can do is link to files I am using: http://goo.gl/3kXjK9

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

Here is my code:

这是我的代码：

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

3 个解决方案

#1

By changing the #device CSS:

通过更改#device CSS：

Remove the width
删除宽度
Use auto margins:
使用自动边距：

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

#2

You can center it by using the following CSS,

您可以使用以下CSS将其居中

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

Hope this help. :)

希望这有帮助。 :)

#3

I don't have much to go on since there's no live demo, so here's what I did:

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

Used flexbox, the #device1 is the flex container and is controlling the children .box to center. There are of course alternative ways to arrange them.

使用flexbox，＃device1是灵活容器，并控制子.box到中心。当然有其他方式来安排它们。
The #device1 is centered by applying padding: 10px to body

＃device1通过应用填充来居中：10px到body
Removed all positioning properties which were responsible for showing showing all of the .box in one corner.

删除了所有定位属性，这些属性负责显示在一个角落中显示所有.box。
Corrected #device1 attributes that were being written as CSS properties.

更正了正在写为CSS属性的＃device1属性。
Keep in mind the original dimensions were kept, so each element is at the size you have originally made them as.

请记住保留原始尺寸，因此每个元素的大小都与原来的大小相同。
Added another #device2 to demonstrate the flexbox property of order. On the #device2 the .box are each assigned an order property and a integer value. The .box are arranged accordingly (but only in appearance, in the DOM they are positioned as they are in the code)

添加了另一个＃device2来演示订单的flexbox属性。在＃device2上，每个.box都分配了一个order属性和一个整数值。 .box相应地排列（但只在外观上，在DOM中它们的位置与代码中一样）

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

#1