Center div horizontally

Question

On this page, I would like to horizontally center the main #container div relative to the page. Normally I would achieve this by adding a CSS rule,

#container { margin: 0 auto }

However, the layout of this page (which I did not write), uses absolute positioning for #container and most of its child elements, so this property has no effect.

Is there any way I can achieve this horizontal centering without rewriting the layout to use static positioning? I've no problem with using JavaScript/JQuery if that's the only way to achieving my objective.

@Starx good question, I've updated my post with the answer (which is yes) — Dónal, Jan 12 '11 at 08:05
FYI you would need to change the position of the #container to `position:relative`, which essentially you should be able to do without affecting things too much, as long as the #container is the outter most element. — Joel Glovier, Jan 12 '11 at 16:48

score 7 · Accepted Answer · edited Dec 10 '15 at 11:44

Same as @rquinn answer but this will adjust to any width. Check this demo

http://jsfiddle.net/Starx/V7xrF/1/

HTML:

<div id="container"></div>

CSS:

* { margin:0;padding:0; }
#container {
    width:50px;
    position:absolute;
    height:400px;
    display:block;
    background: #ccc;
}

Javascript

function setMargins() {
    width = $(window).width();
    containerWidth = $("#container").width();  
    leftMargin = (width-containerWidth)/2;    
    $("#container").css("marginLeft", leftMargin);    
}

$(document).ready(function() {
    setMargins();
    $(window).resize(function() {
        setMargins();    
    });
});

@Don, Why haven't you accepted an answer? You liked it didn't you? :D — Starx, Mar 15 '12 at 15:05

score 4 · Answer 2 · edited Jan 20 '11 at 21:33

You can use also use jQuery:

  function setMargins() {
    var width = $(window).width();
    if(width > 1024){
        var leftMargin = (width - 1024)/2;
        $("#container").css("marginLeft", leftMargin);    
    }
 }

Then I put this code after the $(document).ready event:

$(document).ready(function() {

    setMargins();

    $(window).resize(function() {
        setMargins();    
    });
});

score 1 · Answer 3 · answered Jan 12 '11 at 07:52

1

the container width is 1024px, so you can try to give a left value 50% and margin-left: -512px.

answered Jan 12 '11 at 07:52

kuyabiye

700
3
13

this wouldn't work at screen with 800px would it? or 1280, or 1360 ........ SO ON – Starx Jan 12 '11 at 07:59
why not? you can try it with resizing your window. – kuyabiye Jan 12 '11 at 08:11
it will work on larger screens, but on smaller ones, the user will not be able to see the whole image. (He won't be able to scroll them into view) – Dan Jan 12 '11 at 08:53

score 0 · Answer 4 · answered Jan 12 '11 at 08:13

Using Javascript, this will put #container at the center of your browser's window.

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px';
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';

score 0 · Answer 5 · answered Jan 12 '11 at 08:36

If your main container is using absolute position, you can use this CSS to center it horizontally;

#container {
   position:absolute;
   width:1000px;  /* adjust accordingly */
   left:50%;
   margin-left:-500px; /* this should be half of the width */
}

score 0 · Answer 6 · edited Jan 20 '11 at 21:35

0

It's simple. Try this

body {
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */
}

#Content {
    width:500px;
    margin:0px auto; /* Right and left margin widths set to "auto". */
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

edited Jan 20 '11 at 21:35

Peter Mortensen

30,738
21
105
131

answered Jan 12 '11 at 12:32

Mikul Gohil

583
1
7
14

But will this work if #Content and it's child elements are absolutely positioned? – Dónal Jan 12 '11 at 12:39
this will work even for child element if possible can you give me some more detail – Mikul Gohil Jan 12 '11 at 13:00

score -1 · Answer 7 · 2015-09-03T22:37:40.253

This way worked best for me. Without changing margins, but the position. Required: object -> margin-left: 0; and position: relative;

check example here: jsfiddle Code:

function setObjPosition(container, object) {
    var containerWidth = $(container).width();
    var objectWidth = $(object).width();

    var position = (containerWidth / 2) - (objectWidth / 2);

    $(object).css('left', position);
}

function setPositionOnResize(container, object) {
    setObjPosition(container, object);
    $(container).resize(function () {
        setObjPosition(container, object);
    });
}

Use:

<script type="text/javascript">
    $(document).ready(function () {
        setPositionOnResize(window, "#PanelTeste");
    });
</script>

It can be centered within any container.

Center div horizontally

7 Answers7

Linked