Center Align on a Absolutely Positioned Div

小开

最佳答案

Your problem may be solved if you give your div a fixed width, as follows:

div#thing {
position: absolute;
top: 0px;
z-index: 2;
width:400px;
margin-left:-200px;
left:50%;
}

小开

Yes:

div#thing { text-align:center; }

小开

div#thing
{
position: absolute;
width:400px;
right: 0;
left: 0;
margin: auto;
}

小开

If it is necessary for you to have a relative width (in percentage), you could wrap your div in a absolute positioned one:

div#wrapper {
position: absolute;
width: 100%;
text-align: center;
}

Remember that in order to position an element absolutely, the parent element must be positioned relatively.

小开

I was having the same issue, and my limitation was that i cannot have a predefined width. If your element does not have a fixed width, then try this

div#thing
{
position: absolute;
top: 0px;
z-index: 2;
left:0;
right:0;
}


div#thing-body
{
text-align:center;
}

then modify your html to look like this

<div id="thing">
<div id="thing-child">
<p>text text text with no fixed size, variable font</p>
</div>
</div>

小开

I know I'm late to the party, but I thought I would provide an answer here for people who need to horizontally position an absolute item, when you don't know its exact width.

Try this:

// Horizontal example.
div#thing {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

The same technique can also be applied, for when you might need vertical alignment, simply by adjusting the properties like so:

// Vertical example.
div#thing {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

小开

To center it both vertically and horizontally do this:

div#thing {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

小开

Or you can use relative units, e.g.

#thing {
position: absolute;
width: 50vw;
right: 25vw;
}

小开

.contentBlock {
width: {define width}
width: 400px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
 

}