css如何实现div全屏显示,css – 在全屏div中居中基于百分比的div

演示

码

#hello {

position : absolute;

width : 100%;

height : 100%;

background-color : #123456;

text-align: center;

}

#hello:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

#mini {

height : 50%;

width : 50%;

background-color : #FFFFFF;

display: inline-block;

vertical-align: middle;

}

它是如何工作的？

>水平定心(简易)：

#hello {

text-align: center;

}

#mini {

display: inline-block;

}

>垂直居中：

>使用ghost元素将线条的高度设置为100％高度：

#hello:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

>使用vertical-align垂直(相对于该行)居中#mini：

#mini {

display: inline-block;

vertical-align: middle;

}

浏览器支持

基本上一切和IE 8.

如果使用真实元素作为ghost,而不是：before伪元素,则也可以支持IE7.但它在语义上并不正确.