Html 如何将 div 定位在屏幕的底部中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9383163/
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
How do I position a div at the bottom center of the screen
提问by BlackFire27
I have this css:
我有这个 css：
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
I have this html:
我有这个 html：
<div id="manipulate" align="center">
</div>
How do we position that div at the bottom center of the screen?!?
我们如何将那个 div 定位在屏幕的底部中心？！？
回答by mutp
If you aren't comfortable with using negative margins, check this out.
如果您不习惯使用负边距，请查看此内容。
HTML -
HTML -
<div>
Your Text
</div>
CSS -
CSS -
div {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
Especially useful when you don't know the width of the div.
当您不知道 div 的宽度时特别有用。
回答by Purag
align="center"has no effect.
align="center"没有效果。
Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.
既然您有position:absolute，我建议将其定位在左侧 50% 的位置，然后从其左边距减去其宽度的一半。
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
回答by xandercoded
Use negative margins:
使用负边距：
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
The key here is the width, leftand margin-leftproperties.
这里的关键是width,left和margin-left属性。
回答by MatthewK
Here is a solution with two divs:
这是一个有两个 div 的解决方案：
HTML:
HTML：
<div id="footer">
<div id="center">
Text here
</div>
</div>
CSS:
CSS：
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
#center {
width: 500px;
margin: 0 auto;
}
回答by Shawn Taylor
You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;
您可以使用负边距将其居中，但请注意，如果任何包含的 div 未设置为 position:relative; 它将正好位于屏幕的中心。
For example. http://jsfiddle.net/aWNCm/
So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.
因此，精确居中此 div 的最佳方法是为其包含的 div 设置正确的属性位置属性，否则它将以某些随机方式丢失。
