html css设置垂直居中,CSS设置垂直居中

解决思路是得到父元素的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]