首页 > 代码库 > CSS中怎么让DIV水平居中
CSS中怎么让DIV水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
text-align:center;这个属性不是让div居中的，是让div中的内容居中,
当我们想让一个容器中的div水平居中其实方法很简单只需定义margin就行了，即margin:0 auto;然后你的div就水平居中了。
如下代码例子：
box2在box1中水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div居中问题</title>
<style type="text/css">
.box1{
width:1000px;
height: 700px;
background-color:blue;
}
.box2{
width:666px;
height: 500px;
background-color: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>div居中问题</title>
<style type="text/css">
.box1{
width:1000px;
height: 700px;
background-color:blue;
}
.box2{
width:666px;
height: 500px;
background-color: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
CSS中怎么让DIV水平居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。