Html 在绝对定位的 Div 上居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/252856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center Align on a Absolutely Positioned Div
提问by Steve
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;
div 在顶部，但我不能用<center>or 将它居中margin: 0 auto；
回答by JacobE
Your problem may be solved if you give your diva fixed width, as follows:
如果你给你div一个固定的宽度，你的问题可能会解决，如下所示：
div#thing {
position: absolute;
top: 0px;
z-index: 2;
width:400px;
margin-left:-200px;
left:50%;
}
回答by Matheus Oliveira
div#thing
{
position: absolute;
width:400px;
right: 0;
left: 0;
margin: auto;
}
回答by Michael Giovanni Pumo
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%);
}
回答by Armin
To center it both vertically and horizontally do this:
要垂直和水平居中，请执行以下操作：
div#thing {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
回答by Aliaksei
Or you can use relative units, e.g.
或者您可以使用相对单位，例如
#thing {
position: absolute;
width: 50vw;
right: 25vw;
}
回答by panwar
.contentBlock {
width: {define width}
width: 400px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}回答by dalvallana
If it is necessary for you to have a relative width (in percentage), you could wrap your div in a absolute positioned one:
如果你有必要有一个相对宽度（百分比），你可以将你的 div 包装在一个绝对定位的 div 中：
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.
请记住，为了绝对定位元素，必须相对定位父元素。
回答by Usman Shaukat
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
然后修改你的html看起来像这样
<div id="thing">
<div id="thing-child">
<p>text text text with no fixed size, variable font</p>
</div>
</div>
回答by Usman Shaukat
Yes:
是的：
div#thing { text-align:center; }
