Center div horizontally

Question

On this page , I would like the horizontal center of the main container # container relative to the page. I usually achieved 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 children, so this property has no effect.

Is there a way to achieve this horizontal centering without overwriting the layout to use static positioning? I have no problem using JavaScript / jQuery if this is the only way to achieve my goal.

Answer 1

Same as @rquinn, but it will adjust to any width. Check out 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(); }); }); 

Answer 2

You can 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(); }); }); 

Answer 3

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

Answer 4

Using Javascript, this will put the # container in the center of your browser 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'; 

Answer 5

If your main container uses an 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 */ } 

Answer 6

It's simple. try it

 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; } 

Answer 7

This method worked best for me. No field changes, but position. Required: object → margin-left: 0; and position: relative;

Here you can check an example: 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); }); } 

Using:

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

It can be centered in any container.