DIV中心頁位置右下角

Question

我有一個帶有背景圖片的div，我正努力將其正確地定位到我的要求。

我想將div的右下角定位在頁面的中心位置，左上角位於左上角，並以不同的分辨率保持在這些位置。

我希望它是有道理的。

任何指導將不勝感激。

Answer 1

讓你的問題更簡化，然後把解決方案。

1. 第一件事你需要有一個容器或地方應該是完全在頁面的中心。
2. 現在你想要另一個div應該在這個居中div的右下角。

我們知道 絕對定位的元素開始計算，從他們的最後相對定位的父其位置。 所以你可以做到這一點創建一個居中的div和裏面創建容器，將相對定位，並作爲右下div的父母。現在你可以把它放在右下角的絕對位置。

以下是代碼示例。

<div class="center"> 
    <div class="container"> 
     <div class="bottomRight"> 
     </div> 
    </div> 
</div> 

和CSS

body{ 
    background:#EFEFEF; 
} 
.center { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; 
    margin-top: -150px; 
    background:Red; 
} 

.container{ 
    position:relative; 
    background:yellow; 
    height:100%; 
} 
.bottomRight{ 
    position:absolute; 
    right:0px; 
    bottom:0px; 
    background:Blue; 
    width:100px; 
    height:100px; 
} 

Js Fiddle Demo

Answer 2

如果你想定位的元素，使得它的邊角都在特定位置相對於頁面，you could just position it absolutely：

div { 
    position: absolute; 
     top: 0; 
     right: 50%; 
     bottom: 50%; 
     left: 0; 
} 

基本上，這將指定其位置無論窗口是如何（重新）大小，始終都是邊緣。

Answer 3

如果我理解正確你的問題，我想你應該添加這些CSS規則：

.your_div_class{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 50%; 
    height: 50%; 
}