垂直對齊中間的div的div

檢查此HTML中：垂直對齊中間的div的div

<div class="wrapper"> 
    <div class="content"> 
    </div> 
</div> 
<div class="footer"> 
    <hr /> 
    <p>some text</p> 
</div>

和CSS：

.footer { 
    position: absolute; 
    height: 100px; 
    width: 100%; 
    bottom: 0; 
    background-color: black; 
} 

.wrapper { 
    padding-bottom: 100px; 
    background-color: blue; 
    height: 100%; 
} 

.content { 
    width: 200px; 
    height: 100px; 
    margin: auto; 
    background-color: green; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
}

你可以看到，footer有位置絕對和停留在頁面的底部。 wrapper將覆蓋剩餘空間並在其中包含content。我想垂直對齊content而不打破當前佈局。你有什麼建議嗎？

Here是JSFiddle鏈接。（注意：jsfiddle不能按預期工作，在footer下總是有空格，在瀏覽器中運行HTML文件時不會發生此行爲）。

注：我不想使用固定高度wrapper，我想它涵蓋了所有的剩餘空間，所以請不要建議我使用line-height

我試過的例子here，但它不」不像是會工作

注意我想要的佈局方便地修改（如加在頂部的標題或內容）而不被破壞。因此，我要避免使用絕對位置上wrapper和content

注2對不起，不澄清，實際上，content沒有固定的大小，它的大小取決於它裏面的內容，因此，使用negative margin溶液如我上面提到

不起作用

來源

2014-01-16 Doan Cuong

會稍後再檢查，通過我睡覺！ –

下面是一個使用下面的CSS的方法：

.footer { 
    position: absolute; 
    height: 100px; 
    width: 100%; 
    bottom: 0; 
    background-color: black; 
} 

.wrapper { 
    background-color: blue; 
    position: absolute; 
    top: 0; 
    bottom: 100px; 
    left: 0; 
    right: 0; 
} 

.content { 
    width: 200px; 
    height: 100px; 
    background-color: green; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
}

使用絕對定位，然後切緣陰性，因爲你的內容已經明確尺寸，這是相對簡單的。

觀看演示的：

對於.wrapper，使用上，下，左，右偏移到div伸展到全寬度和高度，考慮到100px的頁腳。

對於.content，機頂盒和左至50％時，.wrapper然後的中心點調整使用負邊距.content div的中心。

請記住要清除body的餘量，否則您可能會看到10px空白，具體取決於您的瀏覽器。

來源

2014-01-16 03:27:41

非常感謝您的建議，它運作良好。但無論如何，要避免在bot包裝器和容器中使用'position：absolute'？因爲如果我在網站的頂部放置其他東西，它會打破布局，所以我希望佈局足夠靈活，以便輕鬆擴展而不會破壞版面 –

啊!!!現在這是一個不同的問題。你會考慮使用CSS table/table-cell嗎？ –

請您向我展示關於表格/表格單元解決方案的示例或參考鏈接？ –

我能夠得到它使用Method 1 from the example you linked

工作，我添加了以下內容：

.content { 
    width: 200px; 
    height: 100px; 
    margin: auto; 
    background-color: green; 
    /* THE BELOW WAS ADDED */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -100px 0 0 -100px; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    /* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */ 
    margin: 0; 
}

jsFiddle of working example

來源

2014-01-16 03:30:11

你幾乎就在那裏，'.wrapper'延伸到頁腳下面，可能不是預期的效果。看到我的答案，我們都使用相同的方法。 –

@MarcAudet Aaah我以前沒有看到你的小轉彎。非常好！你贏了！ ;） –

嘿，我們都贏了！學習是樂趣的關鍵！ –

添加到您的.content

position: relative; 
top: 50%; 
transform: translateY(-50%);

僅有3行代碼爲vertical align

來源

2014-01-16 04:26:50

http://caniuse.com/#search=transform它不是在IE8 –

支持的代碼應該在所有設備兼容，一個好的開發商應該在代碼一樣聰明 –

所以你不會被考慮呢？這是留給你，我說的事實，請不要再有爭論 –

垂直對齊中間的div的div

回答

相關問題