如何在屏幕的底部中心位置一个div
我有这样的CSS:如何在屏幕的底部中心位置一个div
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
我有这个网站:
<div id="manipulate" align="center">
</div>
我们如何在底部中心是DIV位置屏幕?!?
align="center"
没有效果。
既然你有position:absolute
,我建议从左边它定位50%,然后从左边距减去其宽度的一半。
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
使用负边距:
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
这里的关键是width
,left
和margin-left
性能。
你是怎么做到的?很有意思.. – 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设置正确的属性位置属性,否则它将以某种随机方式丢失。
下面是两个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;
}
非常感谢!!!! – 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的宽度。
你能告诉我这是如何工作的吗? – HaneTV 2017-09-22 09:42:18
嗯..什么解决方案..我可以将它设置为中心? – BlackFire27 2012-02-21 18:40:35
Alright..I会接受你的答案 – BlackFire27 2012-02-21 18:49:59