垂直居中用得不少了，我在學習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%);

}

總結

以上是生活随笔為你收集整理的html如何设置滚动条居中,css3内容垂直居中及垂直滚动条例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。