垂直居中用得不少了，我在学习css3中也就碰到过了，在此小编就来为各位介绍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%);

}