方法一:
HTML部分:
<div id="box">
</div>
CSS部分:
当然,相对定位absolute也可以换成绝对定位fixed。
只要top,right,bottom,left的值相等,也可以是其他值。
#box{
width: 400px;
height: 300px;
background-color: pink;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
方法二:
HTML部分:
<div id="box">
</div>
CSS部分:
同样,相对定位absolute也可以换成绝对定位fixed。
#box{
width: 400px;
height: 300px;
background-color: pink;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法三:
HTML部分:
<div id="box">
</div>
CSS部分:
flex方法也是相当便利容易理解的方法之一,但要注意垂直居中时,要同时设置body,和html的值。
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
#box{
width: 400px;
height: 300px;
background: pink;
}
方法四:
其一:
HTML部分:
<div id="box">
</div>
CSS部分:
这是一种利用伪元素将屏幕高度撑开,从而可以使用vertical-align:middle;方法达到垂直居中效果的一种方法
*{
padding: 0;
margin: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
text-align: center;
}
body::before{
content: '1';
height: 100%;
display: inline-block;
vertical-align: middle;
}
#box{
width: 400px;
height: 300px;
background: pink;
display: inline-block;
vertical-align: middle;
}
其二:
当然除了利用伪元素,也可以直接使用一个空元素来达到撑开屏幕高度的效果
HTML部分:
<nav></nav>
<div id="box">
</div>
CSS部分:
*{
padding: 0;
margin: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
text-align: center;
}
nav{
height: 100%;
display: inline-block;
vertical-align: middle;
}
#box{
width: 400px;
height: 300px;
background: pink;
display: inline-block;
vertical-align: middle;
}