positioning by center

[gib65]

Is it possible to position an element by its center? What I mean is, instead of doing this:

<div style="position: absolute; left: 200px;">

is there a way of doing something like this:

<div style="position: absolute; center: 250px;">

[jscheuer1]

If using absolute positioning as I see you are, you can use a combination of left: 50% and left margin. But, depending upon how you're envisioning it, you may need to set or at least know the width of the element.

For instance:

position: absolute;
left: 50%;
width: 300px;
margin-left: -150px;

Will center the element within its offset parent element (often the body, but would otherwise be the first parent element with position set to something other than static).

However, there must be room for the negative margin, otherwise the element you're positioning will bleed out over the left edge of the parent. In the case of this being the body or if its any other element with overflow: hidden, it (the part that bleeds to the left) would be unseen.

If when you say:

<div style="position: absolute; center: 250px;">

you mean 250px to the right of the center of the element, you could do:

<div style="position: absolute; left: 50%; margin-left: 250px;">

If that pushes the element too far to the right, there may be a horizontal scrollbar or the right part or all of the element might be hidden - again depending upon the element's width, its offset parent element's width and its properties.

In this case though, if the offset parent is the body and space is limited, and it's overflow is not hidden, you get a horizontal scrollbar. And only some other offset parent element with limited space and overflow: hidden would result in part or all of the positioned element being hidden.

To see what I'm talking about, the best thing would be to play around with it.

You're almost always going to have more control though if you set or at least know (like with an image) the width of the element you're doing this with.

[Blogfreakz]

Is it possible to position an element by its center? What I mean is, instead of doing this:

<div style="position: absolute; left: 200px;">

is there a way of doing something like this:

<div style="position: absolute; center: 250px;">

Hi!, no such thing in css for

center: 250px;

if you want to center the element,, you can use margin: auto

[gib65]

If when you say:

<div style="position: absolute; center: 250px;">

you mean 250px to the right of the center of the element, you could do:

<div style="position: absolute; left: 50%; margin-left: 250px;">

Actually, when I say center: 250px; I mean place the element's center at 250px into the parent object (from the left).

I don't have a fixed width for the element as it is dynamic and depends on its contents.

[Anuradha Chawla]

I think you can't do it like this way in CSS.Use <div style="position:absolute;margin-left:250px;"> Try this may be it will help you.