css3内容垂直居中显示_css3内容垂直居中及垂直滚动条例子

【www.bbyears.com--css3教程】

内容垂直集中

相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

.container {
    min-height: 6.5em;
    display: table-cell; 
    vertical-align: middle;
}

垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

html { height: 101% }

CSS3 Transforms实现垂直、水平居中

水平垂直居中实现代码

.parent {
    width: 200px;
    height: 200px;
    background-color: black;
}
.child {
    position: relative;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color:red;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

本文来源：http://www.bbyears.com/css/73730.html