html – 将div内容居中,没有固定的宽度或高度

概述尽管如此,这可能看起来很像现有的许多帖子,我找不到解决方案. 我有以下HTML： <div class="outer-zone"> <div> Outer zone. </div> <div class="inner-zone"> Inner zone here... </div></div> 和相应的类,看起来像这样： .oute 尽管如此,这可能看起来很像现有的许多帖子,我找不到解决方案.

我有以下HTML：

<div >    <div>        Outer zone.    </div>    <div >        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; }

我想要实现的是在页面中居中(垂直和水平)的外区div,以及在外div中居的inner-div.

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

结果到目前为止,看起来像这样：

(拖动图片以注意底部空白区域)

解决方法 这样就可以了：

你需要将你的内容包装为div：table和height / wIDth为50％和90％.
然后将.outer-zone设置为display：table-cell; vartical对齐：中间.

FIDDLE

HTML：

<div >    <div >        <div >            <div>                Outer zone.            </div>            <div >                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;}

总结

以上是内存溢出为你收集整理的html – 将div内容居中,没有固定的宽度或高度全部内容，希望文章能够帮你解决html – 将div内容居中,没有固定的宽度或高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。