How to center absolutely positioned element in div?

    |
  • Added:
  • |
  • In: Wordpress

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown.

I tried this. But it needs to be adjusted as the width is responsive.

.center { left: 50%; bottom:5px; } 

Any ideas?

This Question Has 22 Answeres | Orginal Question | Ish

Searching for an solution I got answers above and could make content centered with Matthias Weiler answer but using text-align.

#content{ position:absolute; left:0; right:0; text-align: center; } 

Worked with chrome and Firefox.

As far as I know, this is impossible to achieve for an unknown width.

You could - if that works in your scenario - absolutely position an invisible element with 100% width and height, and have the element centered in there using margin: auto and possibly vertical-align. Otherwise, you'll need Javascript to do that.

I have used similar solution:

#styleName { position: absolute; margin-left: -"X"px; } 

Where "X" is half of the width of a div I want to display. Works fine for me in all browsers.

HTML:

<div class="wrapper"> <div class="inner"> content </div> </div> 

CSS:

.wrapper { position: relative; width: 200px; height: 200px; background: #ddd; } .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 100px; background: #ccc; } 

This and more examples here

Try not to use the dark side of the CSS. Avoid using negative values for margins. I know that sometimes you are forced to do awful things like a margin-left: -450px, but probably you could do something like right: 450px. It's just my way to work.

Responsive Solution

Here is a good solution for responsive design or unknown dimensions in general if you don't need to support IE8 and lower.

.centered-axis-x { position: absolute; left: 50%; transform: translate(-50%, 0); } 

Here is a JS Fiddle

The clue is, that left: 50% is relative to the parent while the translate transform is relative to the elements width/height.

This way you have a perfectly centered element, with a flexible width on both child and parent. Bonus: this works even if the child is bigger than the parent.

You can also center it vertically with this (and again, width and height of parent and child can be totally flexible (and/or unknown)):

.centered-axis-xy { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 

Keep in mind that you might need transform vendor prefixed as well. For example -webkit-transform: translate(-50%,-50%);

Really nice post.. Just wanted to add if someone wants to do it with single div tag then here the way out:

Taking width as 900px.

#styleName { position: absolute; left: 50%; width: 900px; margin-left: -450px; } 

In this case one should know the width beforehand.

<body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> I am some centered shrink-to-fit content! <br /> tum te tum </div> </div> </body>

#content { margin:0 auto; display:table; float:none;}
<body> <div> <div id="content"> I'm the content </div> </div> </body>

HTML

<div id='parent'> <div id='centered-child'></div> </div> 

CSS

#parent { position: relative; } #centered-child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } 

http://jsfiddle.net/f51rptfy/

This worked for me :

<div class="container><p>My text</p></div> .container{ position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; } 

sass/compass version of Responsive Solution above:

#content { position: absolute; left: 50%; top: 50%; @include vendor(transform, translate(-50%, -50%)); } 

Absolute Centre

HTML :

<div class="parent"> <div class="child"> <!-- content --> </div> </div> 

CSS :

.parent { position: relative; } .child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } 

Demo: http://jsbin.com/rexuk/2/

Tested in Google Chrome, Firefox, and IE8

Hope this helps :)

Heres a useful jQuery plugin to do this. Found here. I don't think it's possible purely with CSS

/** * @author: Suissa * @name: Absolute Center * @date: 2007-10-09 */ jQuery.fn.center = function() { return this.each(function(){ var el = $(this); var h = el.height(); var w = el.width(); var w_box = $(window).width(); var h_box = $(window).height(); var w_total = (w_box - w)/2; //400 var h_total = (h_box - h)/2; var css = {"position": 'absolute', "left": w_total+"px", "top": h_total+"px"}; el.css(css) }); }; 

I'd like to add on to @bobince's answer:

<body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> I am some centered shrink-to-fit content! <br /> tum te tum </div> </div> </body> 

Improved: /// this makes the horizontal scrollbar not appear with large elements in the centered div.

<body> <div style="width:100%; position: absolute; overflow:hidden;"> <div style="position:fixed; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> I am some centered shrink-to-fit content! <br /> tum te tum </div> </div> </div> </body> 

I know I already provided an answer, and my previous answer, along with others given, work just fine. But I have used this in the past and it works better on certain browsers and in certain situations. So I thought id give this answer as well. I did not "Edit" my previous answer and add it because I feel this is an entirely separate answer and the two I have provided are not related.

HTML:

<div id='parent'> <div id='child'></div> </div> 

CSS:

#parent { display: table; } #child { display: table-cell; vertical-align: middle; } 

this work for vertical and horizontal

 #myContent{ position: absolute; left: 0; right: 0; top:0; bottom:0; margin: auto; } 

and if you want make element center of parent, set position of parent relative

 #parentElement{ position:relative } 

edit:

  • for vertical center align set height to your element. thanks to @Raul

  • if you want make element center of parent, set position of parent to relative

You can place the image in a div and add a div id and have the CSS for that div have a text-align:center

HTML:

<div id="intro_img"> <img src="???" alt="???"> </div> 

CSS :

#intro_img { text-align:center; } 

This is a trick I figured out for getting a DIV to float exactly in the center of a page. Works in IE and Chrome. The trick is in the vertical alignment of the table cell, and fixed positioning.

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5"> <table style="position:fixed;" width="100%" height="100%"> <tr> <td style="width:50%"></td> <td style="text-align:center"> <div style="width:200;border: 5 dashed green;padding:10"> Perfectly Centered Content </div> </td> <td style="width:50%"></td> </tr> </table> </div> 
#container { position: relative; width: 100%; float:left } #container .item { width: 50%; position: absolute; margin: auto; left: 0; right: 0; } 

This works for me:

#content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ }
<body> <div> <div id="content"> I'm the content </div> </div> </body>

My preferred centering method:

position: absolute; margin: auto; width: x% 
  • absolute block element positioning
  • margin auto
  • same left/right, top/bottom

JSFiddle here


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top