Center DIV Within a DIV?

Question

I need help in centering one DIV withing a DIV.

I want to have one container DIV that is auto width to take up the whole width of the screen (lets call it headerContainer.

Within headerContainer, I want 3 more DIVs:

A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).

I want the center DIV directly in the middle of the screen. Right now I can only get it to center between the left and right DIV.

Thanks for any help.

Travis J · Answer 1 · 2012-01-12T06:57:48.717

1

This works.

.headerContainer{
  width:auto !important;
}
.leftDiv{
  float:left;
  width:400px;
}
.rightDiv{
  float:right;
  width:200px;
}
.centerDiv{
  display:inline;
  width:100px;
  margin-left:auto;
  margin-right:auto;
}

.

<div class="headerContainer">
 <div class="leftDiv"></div>
 <div class="centerDiv"></div>
 <div class="rightDiv"></div>
</div>

edited Jan 12 '12 at 06:57

answered Jan 11 '12 at 23:56

Travis J

81,153
41
202
273

You're code does not work. `rightDiv` is wrapping to new line. See: http://jsfiddle.net/Xxwrm/show – Sparky Jan 12 '12 at 00:37
I was adding the right div in after the center div and this was causing the right div to disappear. You must add the right div before adding the center div. – Ibanez Jan 12 '12 at 00:44
@Ibanez, yes, the order of the `div`'s is important which is why this answer is not working properly as Travis has presented it. The other posted answers have fixed his oversight and my posted answer removed some unnecessary CSS. – Sparky Jan 12 '12 at 00:55
@Sparky672: Your code has "div { display: block; }" in it. This code works, you might want to fully inspect your elements before critiquing. – Travis J Jan 12 '12 at 04:35
What? Except for using some shorthand on `margin` and stripping out the wrapper defaults, **my CSS code is identical to yours**. However, your HTML code, exactly as you posted it, does not work as demonstrated here: [http://jsfiddle.net/Xxwrm/show](http://jsfiddle.net/Xxwrm/show) See the third `div`? It's wrapping to a new line. – Sparky Jan 12 '12 at 05:41
the .css from the user-agent you are using adds in "div {display:block}". For correctness, and to be cross-browser compatible, this should be overwritten by adding display:inline to the center div. I have edited the code to reflect the change. – Travis J Jan 12 '12 at 06:57
This order does not work now. You still must load the right div before loading the center div. Somehow the load order got switched in the above example. – Ibanez Jan 12 '12 at 14:29
**Quote Ibanez:** _"Somehow the load order got switched in the above example."_ @Ibanez, you are correct about loading the right `div` before the center `div`. However, you are mistaken about this answer's revisions. It's always been posted like that (which is what I've been saying all along) and you can click [this link](http://stackoverflow.com/posts/8828449/revisions) to see any edits: http://stackoverflow.com/posts/8828449/revisions – Sparky Jan 12 '12 at 16:16
lol, I must of just followed the same order as the CSS then. Sorry! – Ibanez Jan 12 '12 at 18:18

score 1 · Accepted Answer · answered Jan 12 '12 at 00:51

CSS:

.leftDiv{
  float: left;
  width: 400px;
}
.rightDiv{
  float: right;
  width: 200px;
}
.centerDiv{
  width: 100px;
  margin: 0 auto;
}

HTML:

<div>
   <div class="leftDiv">left</div>
   <div class="rightDiv">right</div>
   <div class="centerDiv">center</div>
</div>

DEMO:

Code: http://jsfiddle.net/Xxwrm/6/

Fullscreen: http://jsfiddle.net/Xxwrm/6/show

score 0 · Answer 3 · answered Aug 09 '15 at 13:19

You can use a modern solution due the flex concept of css3.

.parent {
  display: flex;
  height: 300px;
  /* Or whatever */
  background-color: green;
}
.child {
  width: 100px;
  /* Or whatever */
  height: 100px;
  /* Or whatever */
  margin: auto;
  /* Magic! */
  background-color: yellow;
}

<div class="parent">
  <div class="child ">Div1</div>
</div>

score 0 · Answer 4 · answered Jan 11 '12 at 23:38

What you could do is add another div at the end which makes both sides equal, and set visibility: hidden; (not display: none;); this way it would centre the middle div.

For example in this case you'd have one @ 400px, another @ 100px, another @ 200px and another one, hidden, @ 200px.

Regards, Richard

John Papa · Answer 5 · 2012-01-12T13:43:15.620

0

<div class="headerContainer">
 <div class="leftDiv">left</div>
 <div class="rightDiv">right</div>
 <div class="centerDiv">center</div>
</div>

This HTML with this CSS will work. I colored the DIV's to make it obvious.

.headerContainer{
  width:auto;
}
.leftDiv{
  float:left;
  width:400px;
  background:pink;
}
.centerDiv{
  width:100px;
/*
  margin-left:auto;
  margin-right:auto;
*/
  margin:0 auto;
  background:cyan;
}
.rightDiv{
  float:right;
  width:200px;
  background:lightgray;
}

However, if the screen is not 700px wide, you will get some wrapping.

Here is a fiddle for it, too: http://jsfiddle.net/johnpapa/9bN2p/

edited Jan 12 '12 at 13:43

answered Jan 12 '12 at 00:33

John Papa

21,880
4
61
60

Essentially you fixed Travis's broken code, but I see no good reason to put `!important` on the `.headerContainer` width, especially when it's already the default `div` behavior. Please explain this. And CSS shorthand could be used on the margin for `.centerDiv`, `margin: 0 auto;` See: http://jsfiddle.net/Xxwrm/4/show – Sparky Jan 12 '12 at 00:44
@Sparky672 - I updated the post to show the shortened margin syntax, and left the old style in their commented out. I also removed the !important because it really is not needed here at all. "!important" is a way to tell the browser to apply this style even if another rule tries to override it. I only apply it when I see a conflict. Here is a post on the topic: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm – John Papa Jan 12 '12 at 13:45
Thanks. I understand the meaning of `!important`, I was simply questioning its unneeded usage for this case. – Sparky Jan 12 '12 at 16:12
!important is used for browser compatibility with IE, otherwise the width:auto will not be used and will not resize properly if changed dynamically. – Travis J Jan 12 '12 at 19:35
@TravisJ, you are mistaken. It's a hacky way to change the order of cascading precedence; that's nothing specifically to do with IE compatibility. Properly constructed CSS should rarely need `!important` as the precedence is correct from the start. The code above works dynamically in IE without using `!important` or `width:auto;`. Again, see: [http://jsfiddle.net/Xxwrm/4/show](http://jsfiddle.net/Xxwrm/4/show) – Sparky Jan 12 '12 at 20:41
This will work without it, but the assumption is that this is an example for a larger implementation. !important is required to use width:auto; in ie, and will not work without it, especially in situations where the stage is shrunk. Without the !important, when the area is shrank, the width:auto; will not be enforced in ie. – Travis J Jan 12 '12 at 20:50

Center DIV Within a DIV?

5 Answers5

Linked