需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：。
<div style="border: 1px solid blue;position:relative;width: 200px;height: 80px;">
<div style="border: 1px solid blue;top: 19px;left: 49px;position:absolute;width: 100px;height: 40px;"></div>
</div>
3、浏览器运行index.html页面，此时一个盒子放在了另一个盒子的正中央。
温馨提示：答案为网友推荐，仅供参考
第1个回答 2017-08-07
绝对居中方法，让一个子标签水平垂直居中在父标签的中央，如果你知道子标签的宽度和高度，可以使用这类方法：
<html><body>
<style>
.box1{
width: 500px;
height: 500px;
position: relative;
background-color: #2793ff;
}
.box2{
width: 100px;
height: 100px;
display: block;
position: absolute;
top: 0px; left: 0px;
right: 0px; bottom: 0px;
margin: auto;
background-color: #e55581;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
第2个回答 2015-12-21
------style----
*{margin:0;padding:0}
.div1{width:200px;height:200px;background:red;}
.div2{width:100px;height:100px;background:green;margin:0 auto; }
就是设置margin或者padding或者定位实现的
-----------html------------------
<div class="div1">
<div class="div2">
</div>
</div>本回答被网友采纳
*{margin:0;padding:0}
.div1{width:200px;height:200px;background:red;}
.div2{width:100px;height:100px;background:green;margin:0 auto; }
就是设置margin或者padding或者定位实现的
-----------html------------------
<div class="div1">
<div class="div2">
</div>
</div>本回答被网友采纳
第3个回答 2017-07-19
可以利用css3的flex布局
.box{
display: flex;
justify-content:center;
background:#0099cc
}
<div class="box">
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>
flex详情请查看css文档有详细说明，或http://www.cnblogs.com/lxiang/p/4766813.html
有详细说明
.box{
display: flex;
justify-content:center;
background:#0099cc
}
<div class="box">
<h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>
flex详情请查看css文档有详细说明，或http://www.cnblogs.com/lxiang/p/4766813.html
有详细说明
第4个回答 2015-12-21
用定位
相似回答