Using Margin: auto; is not centering div

Question

Margin: auto; isn't centering this <div class="users">.

    .users {
        margin: auto;
    }
    
    .admin {
        margin: 5px;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        box-shadow: 2px 2px 1px grey;
        background: white;
        background: -webkit-linear-gradient(#fff , #F1F1F1);
        background: -o-linear-gradient(#fff , #F1F1F1);
        background: -moz-linear-gradient(#fff , #F1F1F1);
        background: linear-gradient(#fff , #F1F1F1);
    }
    
    .admin img {
        display: block;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        max-width: 100%;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: 2px 2px 1px grey;
    }
    
    .info {
        position: relative;
        background-color: #E0E0E0;
    }
    
    .info h1 {
        padding-top: 10px;
    }
    
    .info h3 {
        margin-top: 0px;
        padding-bottom: 10px;
    }
    
    .info h1, h3 {
        margin-left: 10px;
    }

        <div class="users">
            <div class="aboutrow">
             <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                        </div> 
                        <div class="aboutrow">
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                        </div>
            </div>

Im using bootstrap to make this site, I don't know if that is messing with it or not. I tried adding a margin percentage to the left, but that doesn't play very nicely with mobile screens.

Help will be very much appreciated. Thank you!

centering a `div` is not margin auto your `div` should have a width and then do `margin:0 auto;`. — Rani Moreles Rubillos, Nov 06 '16 at 00:50

Rani Moreles Rubillos · Answer 1 · 2016-11-06T13:09:15.683

3

For centering, we should have a width and then use margin:0 auto;

Working Sample : https://jsfiddle.net/3xhn73ct/1/

.users {
  width:50%;
  margin:0 auto;
}

edited Nov 06 '16 at 13:09

answered Nov 06 '16 at 00:52

Rani Moreles Rubillos

1,114
7
13

Unfortunately that shrinks the .admin div. – Qwerty-Space Nov 06 '16 at 18:24

score 0 · Answer 2 · answered Nov 06 '16 at 00:55

0

A div is a block element by default, and thus has a default width of 100%. Even if you're setting the margin to auto, the element will not be centered because it's already taking all the space available.

You can either explicitely give your element a width, or set its display to inline-block, so that it takes only the space it needs, and set the parent's text-align to center.

answered Nov 06 '16 at 00:55

Drown

5,852
1
30
49

Add a text align to a div? – Qwerty-Space Nov 06 '16 at 18:18
If the child div (.users) is set to inline-block, then setting text-align to center on the *parent* will center the .users div. – Drown Nov 06 '16 at 19:28

nigelheap · Answer 3 · 2018-02-16T03:07:24.220

0

You will need to set a width on .users and that will center the whole div.

.users{
  width:500px; /* for example */
  margin:0 auto;
}

If you are trying to just center the contents of .users you will need to do something like this

.users > div {
   width:500px; /* for example */
   margin: 0 auto;
}

Also since you are using bootstrap you should add a .container class to your wrapping div. That will give you your page margins.

edited Feb 16 '18 at 03:07

answered Nov 06 '16 at 01:02

nigelheap

56
2

I don't think using px would work well on mobile. And I'm not sure what you mean by the last part – Qwerty-Space Nov 06 '16 at 18:18

score 0 · Answer 4 · answered Nov 06 '16 at 01:09

You need to add "position: relative" to that:

.users {
    margin: 0 auto;
    position: relative;
}

And that only works for horizontal centering.

For vertical centering you need to add

.users {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

And for this to work the parent element of .users needs to have a defined height.

score 0 · Answer 5 · answered Nov 06 '16 at 02:37

Not sure,if you want something like this

.users {
  display: flex;
  width: 500px;
  justify-content: center;
  margin: auto;
}
.admin {
  margin: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  box-shadow: 2px 2px 1px grey;
  background: white;
  background: -webkit-linear-gradient(#fff, #F1F1F1);
  background: -o-linear-gradient(#fff, #F1F1F1);
  background: -moz-linear-gradient(#fff, #F1F1F1);
  background: linear-gradient(#fff, #F1F1F1);
}
.admin img {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  max-width: 100%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 1px grey;
}
.info {
  position: relative;
  background-color: #E0E0E0;
}
.info h1 {
  padding-top: 10px;
}

<div class="users">
  <div class="aboutrow">
    <div class="col-md-3 sub admin">
      <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
      <div class="info">
        <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                            
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                        </div> 
                        <div class="aboutrow">
                            <div class="col-md-3 sub admin">
                                <img class=".image-responsive" src="images/pfpics/nord.jpg"></img>
              <div class="info">
                                    <h1>User</h2>
                                    <h3>Info</h3>
                                </div>
             </div>
                        </div>
            </div>

Hope this helps

c0degeas · Answer 6 · 2016-11-06T12:29:26.643

0

Add width attribute for the .users CSS selector, for centering the block.

Sample 1 : jsFiddle

.users
{
    width:50%;
    margin:auto;
}

---OR--

One of many other ways to do it, is by giving body attributes of a table of some percentage width and the block within body i.e div.users as a table cell.

Sample 2 : jsFiddle

.users {
    display:table-cell;
    vertical-align: middle;
}

body {
    width:50%;
    display:table;
    margin:auto;
}

Both of these, seem to work fine with mobile screens as well (need to zoom a bit).

edited Nov 06 '16 at 12:29

answered Nov 06 '16 at 11:27

c0degeas

762
9
19

The first one makes the .admin div quite small. So I added a `width: 24%" to it, and that doesn't work on mobile. Second option doesn't work at all. The first option just needs some tweaking, and it will work – Qwerty-Space Nov 06 '16 at 18:16
@Qwerty-Space : I check the sample (jsFiddle).. Isn't that what you wanted to centre the `.users` block.. – c0degeas Nov 06 '16 at 19:59
Yes, but it didn't work in practice. I've fixed it though. – Qwerty-Space Nov 06 '16 at 21:21
@Qwerty-Space : `24% width` is fine for Big screens but it looks very small for mobile screens... Although we can zoom*, I would suggest you to make it responsive... – c0degeas Nov 06 '16 at 21:25

score 0 · Accepted Answer · answered Nov 06 '16 at 18:53

Okay, the way I fixed it is by changing the HTML and CSS

From <div class="col-md-3 sub admin"> to <div class="col-sm-3 admin"> I'm not totally sure if that contributed, but ¯_(ツ)_/¯

Then I changed the CSS to

.users {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;

}

.admin {
    max-width: 410px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px; 
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    box-shadow: 2px 2px 1px grey;
    background: white;
    background: -webkit-linear-gradient(#fff , #F1F1F1);
    background: -o-linear-gradient(#fff , #F1F1F1);
    background: -moz-linear-gradient(#fff , #F1F1F1);
    background: linear-gradient(#fff , #F1F1F1);
}

The only problems are that it looks a bit funky on tablet sized screens, and that it's not totally centralised. However, it works for now.

score 0 · Answer 8 · answered Nov 07 '16 at 03:13

0

If you want to use margin: auto; to center a div, you will need to explicitly give a "width" to the div, and most importantly, if you want to see it work, you MUST have the width lesser than the width of your screen.

answered Nov 07 '16 at 03:13

TheEarlyMan

384
4
15

score 0 · Answer 9 · answered Nov 07 '16 at 07:04

0

Use following, it will work :

.users

{
text-align:center;

}

answered Nov 07 '16 at 07:04

sandeep

17
3

Using Margin: auto; is not centering div

9 Answers9