如何垂直居中一个div？

Question

我有一个需要水平和垂直居中的 div。

水平居中没有问题，但是垂直对齐存在问题。

我尝试了以下代码：

#parent {
    display: table;
}

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

但是这个方法不起作用。

- trrrrrrm

---

我尝试了谷歌...感谢你的帮助。 - trrrrrrm

检查一下我的答案是否适用于你。@ra_htial... 是的，这是一个古老的问题，但仍然是一个需要澄清的棘手问题。 - juanm55

可能是以下问题的重复：如何在所有浏览器中垂直居中一个div？ - Martin Tournoij

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;
}

如果您的高度不是固定的，那么有一个解决方法。请参考此处。

在jsFiddle上查看示例。

- alex

---

非常感谢你，我的朋友。但是只有在我知道 #child 的高度时，它才有效...但这并不总是相同的。点赞！感谢您的有用回答！ - trrrrrrm

@From.ME.to.YOU 请查看此解决方法。不幸的是，IE6+7需要额外的容器才能实现此效果。 - alex

Answer 2

你可以使用 flexbox 将子元素 div 在父元素 div 中水平或垂直居中：

这应该是你的 html 代码：

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

这是带有flexbox的CSS代码：css。

#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;
}

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

- bpardo

Answer 3

有了父元素属性为 display:table，子元素属性为display:table-cell和vertical-align:middle，这对我很有效。

- Abdullah Aman

Answer 4

首先，将非表格标记视为表格（使用display:table和相关属性）不是跨浏览器的。我不知道您需要支持哪些浏览器，但肯定IE6不会做到这一点。但是，如果您的目标浏览器都支持display:table，我可以给您一些提示。

您正在寻找的垂直居中方法（使用表格布局）取决于具有vertical-align:middle的TD，然后在其中单个块元素将垂直居中。因此，我认为您想要的是：

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

在编程中，使用table-cell而没有包围的table-row和table也是可以的，浏览器会自动为您推断所需的表格包装元素。

- jpsimons

Answer 5

当你不知道内部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/

- juanm55

---

请注意，这将使 div 在可用空间中居中（如果父 div 有一些文本，则将在剩余空间中居中，而不是整个父项大小...要实现这一点，请使用绝对定位）。 - juanm55