How to center multiple divs inside div

Question

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.

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

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>

Answer 1

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.

• The #device1 is centered by applying padding: 10px to body

• Removed all positioning properties which were responsible for showing showing all of the .box in one corner.

• Corrected #device1 attributes that were being written as CSS properties.

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

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

Answer 2

By changing the #device CSS:

• Remove the width
• Use auto margins:

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

Answer 3

You can center it by using the following CSS,

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

Hope this help. :)