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

align="center"无效。

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

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

Answer 2

如果您不习惯使用负边距，请查看此内容。

HTML -

<div>
 Your Text
</div>

CSS -

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

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

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

你可以使用负边距将它居中但是请注意，如果任何包含div的任何包含div未设置到位置：相对;它将完全居中于屏幕的中心;

例如。 http://jsfiddle.net/aWNCm/

因此，准确居中此div的最佳方法是为其包含的div设置正确的属性位置属性，否则会以某种随机方式丢失。

Answer 6

使用Flexbox对我有用：

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

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

6 个答案: