如何将 div 放置在屏幕的底部中心

Question

我有这个CSS：

 #manipulate
{
  position:absolute;
  width:300px;
  height:300px;
  background:#063;
  bottom:0px;
  right:25%;
}

我有这个 html：

 <div id="manipulate" align="center">

</div>

我们如何将那个 div 定位在屏幕的底部中心？！？

原文由 BlackFire27 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

align="center" 无效。

由于您有 position:absolute ，我建议将其定位在距左侧 50% 的位置，然后从其左边距中减去其宽度的一半。

 #manipulate {
    position:absolute;
    width:300px;
    height:300px;
    background:#063;
    bottom:0px;
    right:25%;
    left:50%;
    margin-left:-150px;
}

原文由 Purag 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您不习惯使用负边距，请检查一下。

HTML -

 <div>
 Your Text
</div>

CSS-

 div {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

当您不知道 div 的宽度时特别有用。

原文由 mutp 发布，翻译遵循 CC BY-SA 3.0 许可协议