Html 如何使div垂直居中？

我有一个

div

，我想水平和垂直居中

对于水平问题，一切都很好，但我对垂直对齐有问题

我试过这个：

#parent {
    display: table;
}

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

---

但这不起作用。

如果您只需要支持支持

转换的浏览器（或其供应商前缀版本），请使用这一奇怪的老技巧垂直对齐元素

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

如果您必须支持较旧的浏览器，可以将它们结合使用，但由于呈现
block
vs
table
的不同，它们可能会带来麻烦

#parent {
    display: table;
}

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

如果你的身高是固定的，你需要支持那些非常老，讨厌的浏览器

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

如果你的身高不是固定的，那就有一个

.
首先，将非表标记视为表（显示：table and friends）不是跨浏览器的。我不知道您需要支持哪些浏览器，但IE6肯定不会支持。但是，如果您的目标浏览器完全支持display:table，我可以给您一些提示

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

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

使用表格单元格时，周围没有表格行和表格是可以的，浏览器会为您推断出所需的表格换行元素。
当您不知道内部div大小或其他任何内容时，您可以使用%here and there来修复“居中”

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

代码如下：

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

在这里，你可以看到它的作用
将父属性设置为、
display:table
和子属性设置为
display:table cell
和
vertical align:middle
对我很有用。
您可以使用
flexbox
在父属性
div
中水平或垂直居中放置您的子属性
div
：

这应该是您的html：

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

这是de codepen:
我试过谷歌。。。谢谢你的帮助检查我的答案，看看它是否适合你@拉乌蒂亚尔。。。。是的，这是一个老问题，但仍然是一个需要澄清的棘手问题。我的朋友，很感谢你，但只有当我知道孩子的身高是多少时，这才有效。。。但它并不总是一样的，竖起大拇指！！谢谢你有用的回答@从我到你看。不幸的是，IE6+7需要额外的容器。请注意，这将使div在其剩余的可用空间中居中（如果父div有一些文本，则这种方式将在剩余空间中居中，而不是整个父项大小…使用绝对定位）
<div id="parent">
   <div id="child">
      info
   </div>
</div>

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