全屏垂直居中的HTML页面的方法?

前端之家收集整理的这篇文章主要介绍了全屏垂直居中的HTML页面的方法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在为HTML页面寻找有效的跨浏览器解决方案:

>消耗100%的屏幕高度,没有溢出(即没有滚动)
>具有垂直(和水平)居中< div>这将掌握主要内容

我知道当包装容器具有静态高度时,可以进行垂直定心.将此高度调整到浏览器窗口高度是否可行? (最好不要使用JS.)

解决方法

取决于你对“跨浏览器”的意思.以下工作正常,所有当前的,标准兼容的(因此不是IE6):

HTML:

<div id="a">
    <div id="b">
        <div id="content"></div>
    </div>
</div>

CSS:

html,body,#a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#a {
    display: table;
}

#b {
    display: table-cell;
    margin: 0;
    padding: 0;

    text-align: center;
    vertical-align: middle;
}

#content {
    border: 5px solid red;
    width: 100px;
    height: 100px;
    margin: auto;
}

实例:

http://jsfiddle.net/mGPmr/1/

原文链接:https://www.f2er.com/html/231928.html

猜你在找的HTML相关文章