我知道margin-top百分比是相对于宽度…这就是为什么,我不能总是垂直和水平居中一个50％高度和50％宽度的div.
调整大小时,margin-top相对于宽度
CSS
#mini {
height : 50%;
width : 50%;
background-color : #FFFFFF;
margin-top : 25%;
margin-left : 25%;
}
解决方法
演示
码
#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;
}
基于http://css-tricks.com/centering-in-the-unknown/
它是如何工作的？
>水平定心(简易)：
#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.但它在语义上并不正确.
