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

虽然，这可能看起来很像许多已经存在的帖子，但我找不到解决办法

我有以下HTML：

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

我试图实现的是使

外部区域

div在页面中居中（垂直和水平），而

内部div

在外部div中居中

到目前为止，我所发现的只是如何将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; 
}

（稍微拖动图片以注意底部的空白）

---

这将实现以下目的：

您需要使用

display:table

将内容包装为div，并将高度/宽度设置为50%和90%。 然后将

.outer zone

设置为

显示：表格单元格；变量对齐：中间

HTML:

试试这把小提琴：

CSS:

---

据我所知，你将需要一个固定的像素，而不是一个百分比（我只是在周五的工作中这样做的，找不到一个简单的特殊工作），我认为@RUJordan是正确的。左边距：自动需要一个固定的宽度。它已经水平居中，我的问题实际上是垂直居中。你必须使用“flex box”或CSS+JS。我已经用可视化结果更新了这里的Flex box。@chadocat:外部div不再考虑宽度90%和高度50%。@Vasile Marian Fălămaș然后您需要将宽度90%和高度50%设置为wrap元素@Ricardo Arruda为什么在css可以完美完成工作时使用jquery？因为wrap，垂直对齐不再应用。我还要看看这是怎么做的。外部分区也需要在页面上居中。确定不明白您还希望。外部分区居中，我将更新我的答案。已编辑。现在一切都集中了。

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

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

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

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