请问一下，如何让一个div块垂直居中在页面上，且不限定div的宽度和高度？
10 回答
qq_啊啦嘞_0
TA贡献8条经验 获得超50个赞
只使用css就可以实现任意宽度、任意高度的元素垂直居中、水平和垂直都居中。
1）垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现阴影效果</title>
<style>
.div1{position:absolute;top:50%;bottom:50%;}
</style>
</head>
<body>
<div class="div1">1</div>
</body>
</html>
2）垂直水平都居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现阴影效果</title>
<style>
.div1{position:absolute;top:50%;left:50%;right:50%;bottom:50%;}
</style>
</head>
<body>
<div class="div1">1</div>
</body>
</html>
登陆异常
TA贡献3条经验 获得超2个赞
.dis_vm{ width:0; height:100%; display: inline-block; vertical-align: middle;}要居中的div设置vertical-align: middle;
然后再后面添加一个新的div添加上面的样式
Joy_Sang
TA贡献64条经验 获得超13个赞
.container {
width: 400px;
height: 500px;
background: #ccc;
position: relative;
}
.child {
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
KevenHuang
TA贡献280条经验 获得超233个赞
可以用一个一行一列的table来实现，不过要先给body和table的高设置为100%，利用table中每行的元素都默认为垂直居中的特性实现元素垂直居中。
- 10 回答
- 1 关注
- 3489 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消