如何在屏幕的底部中心位置一个div

我有这样的CSS：如何在屏幕的底部中心位置一个div

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

我有这个网站：

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

</div>

我们如何在底部中心是DIV位置屏幕？！？

来源

2012-02-21 BlackFire27

align="center"没有效果。

既然你有position:absolute，我建议从左边它定位50％，然后从左边距减去其宽度的一半。

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

来源

2012-02-21 18:39:22 Purag

嗯..什么解决方案..我可以将它设置为中心？ – BlackFire27 2012-02-21 18:40:35

Alright..I会接受你的答案 – BlackFire27 2012-02-21 18:49:59

使用负边距：

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

这里的关键是width，left和margin-left性能。

来源

2012-02-21 18:39:28 xandercoded

你是怎么做到的？很有意思.. – BlackFire27 2012-02-21 18:41:40

谷歌？ - “位置绝对中心”，你会在话题找条 – xandercoded 2012-02-21 18:42:22

4秒......这足以让区别。：P – Purag 2012-02-21 18:45:25

可以使用负利润中心，但请注意，它可以准确地集中在屏幕的中心如果任何包含分区未设置为位置：相对;

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

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

来源

2012-02-21 18:50:01

下面是两个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; 
}

来源

2012-02-21 18:56:44 MatthewK

非常感谢!!!! – BlackFire27 2012-02-21 19:11:50

如果你不舒服，使用切缘阴性，检查了这一点。

HTML -

<div> 
Your Text 
</div>

CSS -

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

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

来源

2015-10-23 06:04:20 mutp

你能告诉我这是如何工作的吗？ – HaneTV 2017-09-22 09:42:18

如何在屏幕的底部中心位置一个div

回答

相关问题