html怎么把一个盒子放在另一个盒子中间

发布网友发布时间：2022-04-22 16:18

我来回答

共5个回答

热心网友时间：2022-04-06 13:25

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：。

</div>

3、浏览器运行index.html页面，此时一个盒子放在了另一个盒子的正*。

热心网友时间：2022-04-06 14:43

绝对居中方法，让一个子标签水平垂直居中在父标签的*，如果你知道子标签的宽度和高度，可以使用这类方法：

<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>

热心网友时间：2022-04-06 16:17

------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>

热心网友时间：2022-04-06 18:09

可以利用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
有详细说明

热心网友时间：2022-04-06 20:17

用定位