您的位置：首页 > Web前端 > HTML

HTML - 浅谈DIV盒子居中

2014-12-25 11:18 232 查看 
<html>
<head><title>postion方式的居中</title>
<style>
div{
width: 200px ;
height: 200px ;
background: red ;

position: absolute ;
left: 50% ;
top: 50% ;

margin-top: -100px ;
margin-left: -100px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上是使用postion的方式来使得DIV上下左右一直在中间，DIV的大小不会变。

<html>
<head><title>margin方式的居中</title>
<style>
body{
margin: 0px;
padding: 200px;
}

div{
width: 100% ;
height: 100% ;
background: red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上是使用margin的方式是的DIV居中，他的形状取决于什么，希望大家自己仔细看看。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 王吉平
相关文章推荐
新的分享
章节导航