Question

我想在较大的div内部垂直对齐div。我该怎么做？

HTML：

<div class="outer">

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

</div>

CSS：

.middle {height:160px;display: table-cell; vertical-align: middle;text-align:center;background:red}
.outer {height:550px;background:#eee}

http://jsfiddle.net/zc09442a/

Answer 1

你可以使用一种利用css变换的相当简单的技术，如下所示：

<强> HTML

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

<强> CSS

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

您的更新小提琴here。

您还可以通过添加left: 50%属性并将transform: translate(0, -50%);行更改为transform: translate(-50%, -50%);来垂直和水平居中元素。

垂直和水平居中here

Answer 2

看看这是否有帮助

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

http://codepen.io/jmonit/pen/LEzppM

在div内垂直对齐div

2 个答案: