如何在中心對齊垂直div？

有沒有辦法讓我的瀏覽器中心的div verticaly與CSS的用法對齊？如何在中心對齊垂直div？

2011-09-27 Merianos Nikos

這，我的朋友，這是最好的JavaScript/jQuery的解決而不是純粹的CSS的老問題，沒有防彈，100％乾淨CSS解決方案這也適用於每個瀏覽器。然而，JavaScript使得這很簡單。你應該考慮。 –

下面是做這件事：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <style> 
      html { 
       display: table; 
       width: 100%; 
       height: 100% 
      } 
      body { 
       display: table-row; 
       margin: 0; 
       height: 100% 
      } 
      #foo { 
       display: table-cell; 
       height: 100%; 
       vertical-align: middle 
      } 
      #test { 
       margin: auto; 
       background-color: #ccc 
      } 
     </style> 
    </head> 
    <body> 
     <div id="foo"> 
      <div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
     </div> 
    </body> 
</html>

來源

2011-09-27 17:18:27 Shadow2531

我不喜歡你需要更多元素的事實。 –

這是最好的解決方案！ :) 非常感謝Shadow2531！ –

display：table-cell - 不能在ie7及以下版本中工作。 – anglimasS

如何在中心對齊垂直div？

回答

相關問題