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

Question

我有这个css:

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

我有这个HTML:

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

</div>

我们如何在屏幕的底部中心定位div？!？

Answer 1

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

HTML -

<div>
 Your Text
</div>

CSS -

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

当你不知道div的宽度时特别有用.

Answer 2

align="center" 没有效果.

既然你有position:absolute,我建议将它从左边定位50%,然后从左边缘减去一半的宽度.

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

Answer 3

使用负边距:

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

这里的关键是width,left和margin-left属性.

Answer 4

这是一个有两个div的解决方案:

HTML:

    <div id="footer">
        <div id="center">
            Text here
        </div>
    </div>

CSS:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
#center {
    width: 500px;
    margin: 0 auto;
}

Answer 5

使用 Flexbox 对我有用：

#manipulate {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center; // Centers the item
  bottom: 10px; // Moves it up a little from the bottom
}