如何在我的情況下居中一個相對的div？

Question

我需要在其中創建一個絕對div的相對div。

我還需要在桌面和ipad上以不同分辨率爲中心的相對div。

我有類似：

<div class='container wrapper'> 
     <a id='link1' href='#'><img src='img1.png'/></a> 
     <a id='link2' href='#'><img src='img2.png'/></a> 
     <a id='link3' href='#'><img src='img3.png'/></a> 
     <a id='link4' href='#'><img src='img4.png'/></a> 
     <a id='link5' href='#'><img src='img5.png'/></a> 
    </div> 


.wrapper{ 
    position: relative;  
    top:10%; 
    left:5%; 
    height: 800px; 
} 

#link1{ 
    position: absolute; 
    top: 250px; 
    left: 0; 
} 
#link2{ 
    position: absolute; 
    top: 0; 
    left: 350px; 
} 
#link3{ 
    position: absolute; 
    top: 280px; 
    left: 700px; 
} 
#link4{ 
    position: absolute; 
    top: 600px; 
    left: 580px; 
} 
#link5{ 
    position: absolute; 
    top: 580px; 
    left: 180px; 
} 

我需要，因爲我的元素沒有遵循常規流向使用絕對定位。

他們就像

 ---- 
    | | 
    | | --- 
     ---- | | 
       | | 
----   --- 
| | 
| |  --- 
----  | |  --- 
      | |  | | 
      ---  | | 
        --- 

我不知道怎麼看的CSS我.wrapper股利。有人可以幫我嗎？謝謝。

Answer 1

要集中您的.container，您必須確保其父項具有設定的寬度。這可能是你的身體標記或是一個容器的div。

然後，你可以給你的容器的寬度和自動保證金像這樣：

.container { 
    width:960px; 
    margin: 0 auto; 
} 

margin:0 auto;是一樣的：

margin-top:0; 
margin-right:auto; 
margin-bottom:0; 
margin-left:auto; 

如果您.container絕對定位，你可以中心它通過確保它的父母有一個寬度，那麼你可以做這樣的事情：

.container { 
    width:960px; 
    position:absolute; 
    left:50%; 
    margin-left:-480px; //This is NEGATIVE HALF of the width of the div 
} 

p.s.儘管這不是記錄的事情，但通常.wrapper不在.container之外。他們通常不是同一個元素。

p.p.s.您必須使用絕對元素的百分比，以便在不同設備上正確縮放。如果你有left:700px，那麼它總是從左邊700px。如果它是left:10%那麼它將縮放到其容器的寬度。

Answer 2

我不是100％確定，如果我明白你的需要，但我會嘗試給你2個答案。

首先，也是最直接的方法將設置width:90%和text-align:center

.wrapper{ 
    position: relative;  
    top:10%; 
    left:5%; 
    height: 800px; 
    width:90%; 
} 

，如果你想在裏面的元素爲中心添加text-align:center;;

如果你知道div的寬度，用絕對定位居中放置任何div的CSS方法是將left設置爲50％，將margin設置爲div寬度的1/2;

div { 
position:absolute; 
width:500px; 
left:50%; 
margin-left:-250px; 
} 

希望這有助於！