Question

你究竟如何垂直居中？

水平已经有足够的方法，但无论我尝试什么，垂直居中都是不可能的。

body {vertical-align：middle;}

什么都不做

body {text-align：middle;}

什么都不做

div.middle {top：50％;}

什么都不做

甚至可能吗？

我想我会哭。

Answer 1

请参阅Vertical Centering in CSS。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to ser it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

Answer 2

使用Flexible Box Layout Module来做到这一点。这是codepen的链接。这是简单和最佳解决方案我的感受。如果您没有处理IE浏览器，那么这是对齐块的最佳方法。 “Angular Material”也使用它来制作网格。

<div class="center">
      <div>
            <h4>
                  I am at center
            </h4>
      </div>
</div>


.center {
      /*this is for styling */
      height: 100px;
      margin: 1em;
      color:#fff;
      background: #9f5bd0;

      /*you just have to use this */
      display: flex;
      justify-content:center;
      align-items:center;
}

要了解'灵活的盒子布局模块'，您可以访问FLEXBOX FROGGY。

Answer 3

据我所知，div必须有一个固定的高度才能使它成为可能。

#centered { width: 700px; height: 400px; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -350px; }

使#centered的父图层相对定位。这应该有用。

编辑 - 因此可能有一个未定义的高度。见cletus的答案。

Answer 4

这可能会有所帮助：http://ask.amoeba.co.in/

Answer 5

确保您的外部div是“position：relative”或“position：absolute”（作为参考点）。 2.为内部div设置固定高度。 3.将内部div设置为“top：50％”将其向下移动到中间。 4.人们忘记的步骤是设置“margin-top：-yy”（-yy是内部div的高度的一半以向上抵消div）。

假设您的内部div设置为高度：100px;。代码是：

<style type="text/css">
#outerDiv { position: relative }
#innerDiv { position: absolute; top: 50%; height: 100px; margin-top: -50px }
</style>

垂直对齐一个块

5 个答案: