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

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?!?

5 个解决方案

#1

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.

由于你有位置:绝对,我建议将它从左边定位50%,然后从左边距减去一半宽度。

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

#2

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, left and margin-left properties.

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

#3

If you aren't comfortable with using negative margins, check this out.

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

HTML -

<div>
 Your Text
</div>

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的宽度时特别有用。

#4

Here is a solution with two divs:

这是一个有两个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;
}

#5

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未设置为位置:相对;

For example. http://jsfiddle.net/aWNCm/

例如。 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设置正确的属性位置属性,否则它将以某些随机方式丢失。

#1