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;
}
