1 滾動條的樣式
定高 overflow-y:auto;

image.png

2垂直居中

position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;

 html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
.content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脫離文檔流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
            /*margin-top: -150px;   或者*/
        }

flex布局

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
body{
  display:flex;
 align-items: center; /*定義body的元素垂直居中*/
  justify-content: center; /*定義body的里的元素水平居中*/
}
.orange{
  width:300px;
  height:300px;
  background:orange;
}

清除浮動
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}