解决思路是得到父元素的height,减去子元素的height,再除以2,得到的结果作为像素值内联Top属性。其实就是父元素的50%的高度再减去子元素50%的高度。
下图解释:
上图中红色的“210px”,是我们需要在“top”属性设置的值。
当然,你也可以通过在窗口加载后,或者调整窗口/对象后,再运行一个重新计算位置的javascript。但是,如果有几百个元素的时候,用脚本的话,性能会很差。
HTML代码
[html]
[/html]
CSS代码
[css].wrapz {
background: #eee;
color: #FFF;
font-family: Helvetica, Arial, sans-serif;
left: 50%;
top: 50%;
height: 80%;
width: 80%;
position: absolute;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.parent{
background: lightblue;
padding: 1%;
position: absolute;
height: 50%;
width: 30%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.bigger{
left: 10%;
}
.smaller{
right: 10%;
}
.children{
background: lightgreen;
display: block;
padding-top: 10%;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.bigger .children{
height: 140%;
}
.smaller .children{
height: 80%;
}
[/css]