您的位置：首页 > 其它

实现 div 里面的内容div水平且垂直居中

2015-04-07 22:08 567 查看

方案一（最佳方案）：

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style>
#demo{
width:300px;
height:300px;
position: relative;
background-color: #ff6600;
}
#indemo{
width:100px;
height:100px;
position: absolute;
left:0;right:0;top:0;bottom:0;
margin:auto;
background-color: white;
}
</style>

</head>
<body>
<div id = 'demo'>
<div id = 'indemo'></div>
</div>
</body>
</html>

方案二（该方案必须已知indemo的宽度和高度）：

#demo{
width:300px;
height:300px;
position: relative;
background-color: #ff6600;
}
#indemo{
width:100px;
height:100px;
position: absolute;
left:50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
background-color: white;
}

方案三（不使用定位）：

#demo{
width:300px;
height:300px;
display: table-cell;
vertical-align: middle;
background-color: #ff6600;
}
#indemo{
width:100px;
height:100px;
margin:0 auto;
background-color: white;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航