1、布满整个页面
css
<style>
/* 用百分比设定元素的宽度,一般情况是指参考父元素的宽度,当position是fixed或absolute时,百分比是参考屏幕的宽度。left:x%等位置属性的百分比也是参考屏幕的宽度。 */
/* 注:absolute可换为fixed */
/* 法一 */
/* .container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: green;
} */
/* 法二 */
/* body{
margin: 0;
}
.container{
position: absolute;
width: 100%;
height: 100%;
background-color: green;
} */
/* 法三 */
html,body{
height: 100%;
margin: 0;
}
.container{
width: 100%;
height: 100%;
background-color: green;
}
</style>
html
<div class="container"></div>
2、元素居中
<style>
.box{
width: 100px;
height: 100px;
background-color: green;
}
.box > div{
width: 50px;
height: 20px;
background-color: red;
}
/* flex布局 */
/* .box{
display: flex;
justify-content: center;
align-items: center;
} */
/* table-cell */
/* .box{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box > div {
display: inline-block;
} */
/* 绝对定位 0*/
/* .box{
position: relative;
}
.box > div{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
} */
/* 绝对定位 margin */
/* .box{
position: relative;
}
.box > div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -25px;
} */
/* 绝对定位 translate */
/* .box{
position: relative;
}
.box > div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} */
</style>
<div class="box">
<div></div>
</div>