div 在另一个 div 内定位在中心

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

请关注 class 更新您的信息。请将位置添加到 .top div {position:relative;} 并更新 .top div div class.

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 内定位在中心

div inside another div positioning in center

html

css

position