如何使div垂直居中？

Question

我有一个div，我想水平和垂直居中。

对于水平问题，一切都很好，但我在垂直对齐方面遇到了问题。

我试过了：

#parent {
    display: table;
}

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

但这不起作用。

Answer 1

如果您只需要支持支持transform（或其供应商前缀版本）的浏览器，请使用这个奇怪的老技巧来垂直对齐元素。

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

如果您必须支持较旧的浏览器，您可以结合使用这些浏览器，但由于 block 与 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.

Answer 2

父属性为display:table，子属性为display: table-cell 和vertical-align: middle 为我工作。

Answer 3

首先，将非表格标记视为表格（带有 display:table 和朋友）不是跨浏览器。我不知道您需要支持哪些浏览器，但 IE6 肯定不会这样做。但是，如果你的目标浏览器做都支持 display:table 我可以给你一些提示。

您正在寻找的垂直居中方法（使用表格布局）取决于具有垂直对齐：中间的 TD，然后在其中单个块元素将垂直居中。所以我认为你想要的是：

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

可以使用没有环绕表格行和表格的表格单元格，浏览器会为您推断所需的表格包装元素。

Answer 4

这是另一种方法，当您不知道内部 div 大小或其他什么时，您可以在这里和那里使用 % 来修复“居中” ....

这个想法是您的最高值是子元素高度的一半，以创建居中错觉

代码如下：

<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/

Answer 5

您可以使用flexbox 将您的孩子div 在父div 中水平或垂直居中：

这应该是你的 html：

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

这是css 和flexbox：

#parent{
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 100%;
   height: 100vh;
   background: lightgray;
}
#child{
   position: relative;
   background: black;
   padding: 2rem;
   color: white;
   box-shadow: 5px 5px 20px rgba(0,0,0,.4);
   border-radius: 5px;
}

这里是de codepen：https://codepen.io/bongardabo/pen/YzZQgaJ