Html 在div内垂直对齐div

我想在一个较大的div中垂直对齐一个div。我该怎么做

HTML:

<div class="outer">

    <div class="middle">
        <h1>test</h1>
        <h2>Test</h2>
    </div>

</div>

看看这是否有帮助

.outer{ background:tomato; height:20em; vertical-align:middle; display:table-cell; width:50em; }
.middle{ background:green;  width:50%; margin: auto; }

---

您可以使用一种非常简单的技术，利用css转换，如下所示：

HTML

<div class="outer">
    <div class="middle">
        <h1>Test</h1>
        <h2>Test</h2>
    </div>
</div>

你最新的小提琴

您还可以通过添加

left:50%

属性并更改

transform:translate（0，-50%）将元素垂直和水平居中行到
转换：翻译（-50%，-50%）

垂直和水平居中
我是不是在你的小提琴上遗漏了什么？这不是你想要的吗？
<div class="outer">
    <div class="middle">
        <h1>Test</h1>
        <h2>Test</h2>
    </div>
</div>

.middle {
    margin: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background-color: #ccc;
}

.outer {
    height:550px;
    width:100%;
    background-color:#eee;
    position: relative;
}