如何在中心对齐垂直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？

回答

相关问题