本文介绍了一种使用CSS实现div元素在其父级容器中垂直居中的方法。通过设置父级div的位置属性并利用绝对定位，使子div能够水平及垂直居中显示。这种方法适用于固定高度的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div中div垂直居中</title>
<style>
.parent-wraper{
position:relative;
height:50px;
border:1px solid blue;
}
.child-wraper{
border:1px solid red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:50%;
margin:auto;
}
</style>
</head>
<body>
<div class="parent-wraper">
<div class="child-wraper"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>div中div垂直居中</title>
<style>
.parent-wraper{
position:relative;
height:50px;
border:1px solid blue;
}
.child-wraper{
border:1px solid red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:50%;
margin:auto;
}
</style>
</head>
<body>
<div class="parent-wraper">
<div class="child-wraper"></div>
</div>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
