有沒有辦法將div直接放在它父母的中心？

我有一個名爲#text的div，在另一個div #box內。現在我做這個嘗試中心#text：有沒有辦法將div直接放在它父母的中心？

#box { 
    width: 50%; 
    #text {position: relative; margin-left: 48%;} 
}

這段代碼放在#text大約在#box中心，但是當我調整屏幕，#text變化相對於屏幕的尺寸大小，所以其margin-right的大小發生了變化，並且它不再處於中心位置。

我聽說有一個「黑客」這涉及幾個包裝divs，但我不想過度複雜我的CSS或HTML。有一種簡單的方法可以精確地將div放置在其父項的中心嗎？

來源

2015-02-09 Jeff Caros

是否＃的寬度定義'test'？ – BenM 2015-02-09 22:02:46

如果#text有一個寬度，你可以給它這個樣式，它應該在它的父級邊界內：0 auto; – 2015-02-09 22:05:50

可能的重複[水平中心div在div]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） – 2015-02-09 22:45:51

使用flexbox是國際海事組織將海平面和垂直中心的最佳方式。它的support是不錯的。

來源

2015-02-09 22:04:44 Albert221

首先您發佈的CSS無效。你可以完成你與這樣的事情找什麼：

CSS

body { 
    width:100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#box { 
    width:100%; 
    height: 500px; 
    background: lightblue 
} 
#test { 
    width: 300px; 
    height: 300px; 
    border: 1px solid red; 
    margin: 0 auto 
}

HTML

<div id="box"> 
    <div id="test"> 
     hello 
    </div> 
</div>

See the JS.Fiddle

來源

2015-02-09 22:06:42 crazymatt

就像評論里奧提到的保證金： 0自動是對中的關鍵 – crazymatt 2015-02-09 22:07:38

使用margin: 0 auto;在#text的CSS

來源

2015-02-09 22:07:32

無論內容如何，你都想要精確的頁面中心？做這樣的事情：

p { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

相對，在容器中設置以下屬性爲您元素的父：

div.containerOfPs { 
    position: relative; 
}

來源

2015-02-09 22:27:04

有沒有辦法將div直接放在它父母的中心？

回答

相關問題