如何使DIV在屏幕上水平垂直居中显示?兼容性要好
by 毛三胖 on 2018年01月22日
阅:1702赞:15

CSS代码

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

只用CSS来实现DIV在屏幕上水平垂直居中显示的方案大概有几种吧,但本文中的方案可能是兼容性最好的方案了。关于这一点StackOverflow上也有提及。

兼容性

本文中的CSS代码可以在所有主流浏览器中使用,当然,一些老版本的Internet Explorer除外。 众所周知,Internet Explorer有自己的规则。 所以,我们必须为IE定义不同的属性集。 我们必须有条件地添加一个单独的CSS文件,其中将包含IE遵循的规则。具体如下:

<!--[if lte IE 7]><link href="style-ie.css" rel="stylesheet" /><![endif]-->;

style-ie.css

.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}

代码说明

文中代码的关键是middle的CSS规则。 如果我们尝试用vertical-align属性来垂直对齐一个div,这样做根本不起作用。 原因在于这个属性是用在table cell上的,而不是用在块组长元素div上的。 div的默认显示是block,所以当你创建一个div并尝试用vertical-align做垂直居中时,它将不起作用。 所以我们首先要将div的display设置为table-cell。

文中代码中的outer也起着重要的作用。它占用整个浏览器区域,宽度和高度都设置为100%。 outer为middle创建一个容器。 position属性确保outer div在用户滚动屏幕时浮动。

outer和middle div的组合使得inner div在屏幕上垂直居中。 内部div通过margin-left和margin-right水平居中。

具体请查看演示代码!

CSS
$ 热门标签
$ 贴士
简单是稳定的前提。 -Edsger Dijkstra
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。