Center Align on a Absolutely Positioned Div - html

Question

div#thing {
position: absolute;
top: 0px;
z-index: 2;
margin: 0 auto;
}
<div id="thing">
<p>text text text with no fixed size, variable font</p>
</div>
The div is at the top, but I can't center it with <center> or margin: 0 auto;

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

To center it both vertically and horizontally do this:
div#thing {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Answer 5

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

Answer 6

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>

Answer 7

Or you can use relative units, e.g.
#thing {
position: absolute;
width: 50vw;
right: 25vw;
}

Answer 8

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.

Answer 9

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