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>

Exactly. And your code isn't really clean. Best to use a html file like now and use a css file for your styling. — Chris G, Jan 04 '16 at 14:17
This is working, you have given `#device` a width of 100% so it is filling the screen. The gap you see on the right is because the grey divs don't fit in that last space and so are wrapping. — gaynorvader, Jan 04 '16 at 14:21
For `margin-left:auto; margin-right:auto;` to work like you expect you would need a set static width on that element and you have `width:100%;` which is your problem. — zgood, Jan 04 '16 at 14:28
I am sorry but, I am using nested jqery and it is too complex for jsfiddle, only I can do is link to files I am using: https://goo.gl/3kXjK9 — user2295265, Jan 04 '16 at 14:33
Are you open to a flexbox solution? http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Jan 04 '16 at 15:15

score 1 · Answer 1 · answered Jan 04 '16 at 15:02

1

By changing the #device CSS:

Remove the width
Use auto margins:

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

answered Jan 04 '16 at 15:02

Manuszep

813
11
20

score 0 · Answer 2 · answered Jan 04 '16 at 14:55

0

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. :)

answered Jan 04 '16 at 14:55

Snazzy Sanoj

804
1
11
28

zer00ne · Answer 3 · 2016-01-04T16:24:07.967

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>

How to center multiple divs inside div

3 Answers3