如何在屏幕的底部中心位置一個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

回答

相關問題