将内容居中在div内，没有固定的宽度或高度

Question

Altough，这可能看起来很像已经存在的很多帖子，我找不到解决方案。

我有以下HTML：

<div class="outer-zone">
    <div>
        Outer zone.
    </div>
    <div class="inner-zone">
        Inner zone here...
    </div>
</div>

和相应的类，如下所示：

.outer-zone {
    background-color : navy;
    color : whitesmoke;
    width : 90%;
    height: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.inner-zone {
    background-color : deepskyblue;
    color : navy;
    width : 75%;
    height : 40%;
    margin-left: auto;
    margin-right: auto; 
}

我想要实现的是在页面中居中（垂直和水平）outer-zone div，以及在外部div中居的inner-div。

到目前为止，我所发现的是如何在具有固定高度的div内对齐内容。我想将这些div保持为％宽度和高度。

到目前为止，结果如下：

（拖动图片以注意底部空白区域）

Answer 1

这样可以解决问题：

您需要将内容包装为display:table，高度/宽度为50％和90％的div。 然后将.outer-zone设置为display:table-cell; vartical-align:middle。

FIDDLE

HTML：

<div class="page">
    <div class="wrap">
        <div class="outer-zone">
            <div>
                Outer zone.
            </div>
            <div class="inner-zone">
                Inner zone here...
            </div>
        </div>
     </div>
</div>

CSS：

html,body{
    height:100%;
    width:100%;
    display:table;
}
.page{
    display:table-cell;
    vertical-align:middle;
}
.wrap{
    width:90%;
    height:50%;
    display:table;
    margin:0 auto;
}
.outer-zone {
    display:table-cell;
    vertical-align:middle;
    background-color : navy;
    color : whitesmoke;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.inner-zone {
    background-color : deepskyblue;
    color : navy;
    width : 75%;
    height : 40%;
    margin:0 auto;
}

Answer 2

试试这个小提琴：

http://jsfiddle.net/PU3Rw/

CSS：

html,body{display:table;width:100%;height:100%;}

.main{
    display: table-cell;
    vertical-align: middle;
    height:100%;
    width:100%;
    position:relative;
}