Question

我想创建一个div，其内部有两个div，我也希望使用margin:auto属性将它们置于中心位置。但它没有正常工作。我在网上搜索过这个问题，但我找不到一个好的答案。我错过了什么？

<style>
        body{
            padding: 0px;
            margin:0px;
        }
        .top{
            padding: 0px;
            margin:0px;
            width:100%;
            height:50%;
            background-color: lightblue;
        }
        .top div{
            margin:auto;
            padding:0px;
            box-shadow:2px 2px 2px black;
            width:200px;
            height:200px;
            background-color: red;
            border-radius:20px;
        }
        .top div div{
            margin:auto;
            padding:0px;
            box-shadow:2px 2px 2px black;
            width:100px;
            height:100px;
            background-color: red;
            border-radius:20px;
        }
</style>

向谁询问html：

<body>
    <div class="top">
        <div>
            <div>
            </div>
        </div>
    </div>
</body>

Answer 1

请在课后更新。请将位置添加到.top div {position:relative;}并更新.top div div课程。

<强> HTML

<div class="top">
         <div><div></div></div>
</div>

<强>的CSS

body{
            padding: 0px;
            margin:0px;
        }
        .top{
            padding: 0px;
            margin:0px;
            width:100%;
            height:50%;
            background-color: lightblue;
        }
        .top div{
            margin:auto;
            padding:0px;
            box-shadow:2px 2px 2px black;
            width:200px;
            height:200px;
            background-color: red;
            border-radius:20px;
          position:relative;
        }
        .top div div{
            margin:auto;
            padding:0px;
            box-shadow:2px 2px 2px black;
            width:100px;
            height:100px;
            background-color: red;
            border-radius:20px;
            vertical-align: middle;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

演示here

div在另一个div位于中心位置

1 个答案: