Centering absolute div horizontally?

**pxlcreations** · 07-10-2010, 07:54 PM

Hey guys, I have a question about centering an absolute div. I have multiple divs set up like this:

Code:

<div id="div1" class="draggable">

	<!--Content Start -->
	<span id="clock">*</span>
	<!--Content End -->

</div>

and my CSS goes like this:

Code:

.draggable{
z-index: 1000;
display:none;
margin:0 auto;
}

#div1 {
height:219px;
width:252px;
color:black;
}

And the DIVs get dragged around the page via JavaScript but it needs it to be absolute positioning. So I don't know how to keep those divs all centered in the screen using the code above.

Thank you!

**jscheuer1** · 07-10-2010, 08:15 PM

Code:

#div1 {
height:219px;
width:252px;
color:black;
left: 50%;
margin-left: -126px;
top: 50%;
margin-top: -110px;
}

If you only want to center horizontally, skip the top and margin-top declarations. Once you start moving them around, you will probably want to set the margins to 0.

**pxlcreations** · 07-10-2010, 08:47 PM

Ok, I tried that and its now pushing it mostly off the page. In the JS you helped me with I had to set the relative to absolute because when it was at relative, the positions of the divs were not saved correctly. Once it was changed to absolute, they were in the right positions but they were no longer centered because margin:0 auto; doesn't apply to absolute positioning. Maybe the JS code needs some adjustments to make it work with relative?

**azoomer** · 07-10-2010, 09:12 PM

Had to delete this. It was only a repetition of an earlier statement.

**liamallan** · 07-10-2010, 09:45 PM

not 100% sure this will work, but u could try anyway.

Code:

#div1 {
height:219px;
width:252px;
margin-left: auto;
margin-right: auto;
color:black;
}

**pxlcreations** · 07-10-2010, 10:14 PM

Originally Posted by liamallan

not 100% sure this will work, but u could try anyway.

Code:

#div1 {
height:219px;
width:252px;
margin-left: auto;
margin-right: auto;
color:black;
}

Yeah, that only works on block, relative, and I think static positioning.

**jscheuer1** · 07-11-2010, 02:15 AM

Originally Posted by jscheuer1

Code:

#div1 {
height:219px;
width:252px;
color:black;
left: 50%;
margin-left: -126px;
top: 50%;
margin-top: -110px;
}

If you only want to center horizontally, skip the top and margin-top declarations. Once you start moving them around, you will probably want to set the margins to 0.

Originally Posted by pxlcreations

Ok, I tried that and its now pushing it mostly off the page. In the JS you helped me with I had to set the relative to absolute because when it was at relative, the positions of the divs were not saved correctly. Once it was changed to absolute, they were in the right positions but they were no longer centered because margin:0 auto; doesn't apply to absolute positioning. Maybe the JS code needs some adjustments to make it work with relative?

That's how to center absolutely positioned elements.

I was thinking though, you also have:

Code:

.draggable{
z-index: 1000;
display:none;
margin:0 auto;
}

That might take precedence. Best to get rid of that, since we are trying to override it anyway.

In any case, what I've told you is true. Try this stand alone example page that illustrates the effect:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div1 {
	position: absolute;
	height: 219px;
	width: 252px;
	color: white;
	background-color: blue;
	left: 50%;
	margin-left: -126px;
	top: 50%;
	margin-top: -110px;
}
#div1 div {
	padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div>
Greetings from Asbury Park!
</div>
</div>
</body>
</html>

Or navigate to this demo:

http://home.comcast.net/~jscheuer1/side/center_div/

The fact that it's not working out for you on your page probably indicates that something else is going on there, perhaps a container with relative or absolute position, or a conflict of styles as mentioned at the beginning of this post.

It could of course also be something else, or something else in combination with one or more of the possibilities I've already mentioned.

**pxlcreations** · 07-11-2010, 11:02 AM

Originally Posted by jscheuer1

That's how to center absolutely positioned elements.

I was thinking though, you also have:

That might take precedence. Best to get rid of that, since we are trying to override it anyway.

In any case, what I've told you is true. Try this stand alone example page that illustrates the effect:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#div1 {
	position: absolute;
	height: 219px;
	width: 252px;
	color: white;
	background-color: blue;
	left: 50%;
	margin-left: -126px;
	top: 50%;
	margin-top: -110px;
}
#div1 div {
	padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div>
Greetings from Asbury Park!
</div>
</div>
</body>
</html>

Or navigate to this demo:

http://home.comcast.net/~jscheuer1/side/center_div/

The fact that it's not working out for you on your page probably indicates that something else is going on there, perhaps a container with relative or absolute position, or a conflict of styles as mentioned at the beginning of this post.

It could of course also be something else, or something else in combination with one or more of the possibilities I've already mentioned.

Tried it again and it's still moving the div so about 3/4 of it is off the page. How ever if the .draggable part's CSS is like this:

Code:

.draggable{
z-index: 1000;
display:none;
position:absolute;
right:40%;
}

Most of it seems to be in the middle of the page.

**jscheuer1** · 07-11-2010, 12:46 PM

Check my demo:

http://home.comcast.net/~jscheuer1/side/center_div/

You will see that it works perfectly.

As I say, if you have other styles (scripted or otherwise) and/or a nesting of elements that conflict, then you will need to make other arrangements. However, this is the way to center an absolutely positioned element.

And, just in case anyone wants to know how, instead of just the one demo -

What you do is set the left and the top to 50% and then set the margin-left to negative half the width of the element, and the margin-top to negative half the height of the element.

This will center an absolutely positioned element it in its container.

That's what you were asking about, right?

I'm guessing that initialization of the .draggable class may be what's messing this up for you. Doesn't that kill all the margins?

**pxlcreations** · 07-11-2010, 01:16 PM

Originally Posted by jscheuer1

I'm guessing that initialization of the .draggable class may be what's messing this up for you. Doesn't that kill all the margins?

That is probably true. .draggable goes for every div that is going to be dragged around the page, so if I was to just set a default like left:50%;right:50%;, since each div is a different size, the would be in different positions on the screen. If only margin:0 auto; worked with absolute positioning

Thread: Centering absolute div horizontally?

Thread Tools

Search Thread

Centering absolute div horizontally?

Bookmarks

Bookmarks

Posting Permissions