CSS中怎么让DIV水平居中
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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>。