如何垂直居中div？

我有一個div，我想水平和垂直居中。如何垂直居中div？

對於水平問題一切都很好，但我有一個垂直對齊的問題。

我嘗試這樣做：

#parent { 
    display: table; 
} 

#child { 
    display: table-row; 
    vertical-align: middle; 
}

但這不起作用。

來源

2010-12-11 trrrrrrm

我試過谷歌...感謝您的幫助 – trrrrrrm 2010-12-11 15:33:22

檢查我的答案，看看它是否適用於你.. @ra_htial ....耶老年人的問題，但仍然是一個棘手的問題，應該澄清 – juanm55 2012-07-16 15:44:40

可能的重複[如何垂直居中一個div的所有瀏覽器？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – Carpetsmoker 2015-07-30 15:09:55

如果您只需支持支持transform（或其供應商前綴版本）的瀏覽器，請使用這個奇怪的舊技巧來垂直對齊元素。

#child { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

如果你要支持舊的瀏覽器，就可以使用它們的組合，但他們可能是由於在渲染block VS table差異的痛苦。

#parent { 
    display: table; 
} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
}

如果你的高度是固定的，你需要支持那些真的老了，討厭的瀏覽器...

#parent { 
    position: relative; 
} 

#child { 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
}

如果你的身高是不固定的，有一個workaround。

See it on jsFiddle。

來源

2010-12-11 09:55:37 alex

非常感謝我的朋友，但只有當我知道什麼是＃小孩身高......但並不總是一樣，大拇指！感謝您的有用答案！ – trrrrrrm 2010-12-11 15:37:01

http://jsfiddle.net/RQznA/檢查此例如 – trrrrrrm 2010-12-11 15:39:05

@ From.ME.to.YOU請參閱[解決方法]（http://www.jakpsatweb.cz/css/css-vertical-center-solution。 HTML）。不幸的是，IE6 + 7需要額外的容器。 – alex 2010-12-11 15:40:57

首先，將非表格標記視爲表格（使用display：table和friends）不是跨瀏覽器的。我不知道你需要支持哪些瀏覽器，但肯定IE6不會這樣做。但是，如果你的目標瀏覽器做所有支持顯示：表我可以給你一些提示。

您正在尋找的垂直居中方法（使用表格佈局）取決於具有vertical-align：middle的TD，然後在此範圍內，一個塊元素將垂直居中。所以我覺得你想要的是：

#parent { display:table-cell; vertical-align:middle; } 
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }

這是確定使用的表芯，沒有周圍錶行和表，瀏覽器推斷所需要的表包覆件爲您服務。

來源

2010-12-11 16:42:41 jpsimons

這裏是另一種方式，當你不知道內格大小或什麼的，你可以在這裏使用％有固定「定心」 ......

的想法是，你最值你的子元素的一半高度，創造了定心錯覺

下面的代碼：

<div id="parent"> 
    <div id="child"> 
      hello 
    </div> 
</div>

和造型：

#parent { 
    position: relative; 
    height: 300px; 
    width:200px; 
    background-color:green; 
} 

#child { 
    height: 50%; 
    width: 50%; 
    position:relative; 
    top:25%; 
    left:25%; 
    background-color:red; 
}

在這裏，你可以看到它在行動 http://jsfiddle.net/Wabxv/

來源

2012-07-16 15:41:19 juanm55

請注意，這將div放在剩餘的可用空間中（如果父div有一些文本，這種方式將集中在剩餘空間中，而不是整個父項大小......用於絕對定位） – juanm55 2012-07-16 15:46:53

雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – NathanOliver 2015-07-30 15:14:31

更正@NathanOliver感謝您的支持！ – juanm55 2015-08-24 23:14:32

具有parent屬性爲，display:table和兒童財產display: table-cell和vertical-align: middle爲我工作。

來源

2014-04-21 22:48:36 Abz

如何垂直居中div？

回答

相關問題