我是CSS初学者,想要创建简单的盒子并把另一个盒子放在第一个盒子的中心,
试过这样的事
#first {
width: 100px;
height: 100px;
background: red;
}
#first #second{
width: 50%;
height: 50%;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX-EXAMPLE</title>
</head>
<body>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>但不如预期的那样.
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#first #second{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background: green;
}
您遇到的问题是，默认情况下，您的子元素将自己对齐到其父元素的左上角，而不是您期望的中心。为了将您的子元素定位在中心（水平），您可以使用以下 css：
margin: 0 auto;
这会将它水平放置在中间。
垂直对齐稍微困难一些，因为它涉及确保它从父级的顶部和底部都是正确的，因此您可以使用：
top: 25%;
但是，这应该只在您的孩子根据您的父 div 定位时才使用，因此我们需要包含position:absolute;到我们的子元素中。
但是，如果我们这样做，那么使用left和top属性设置它会更有益，就像这样（在我们的子元素中）：
position: absolute;
left:25%;
top:25%;
所以，使用这个我们来到我们的第一个解决方案：
通过使用absolute定位，让你的父母有relative定位，这将解决你的问题。
margin: 0 auto;
top: 25%;
您可能还想使用伪效果来减少标记（使页面加载速度稍快），因此我们可以在非常有益的程度上使用伪效果（因为我们只使用一个元素而不是两个）：
这如下所示：
position: absolute;
left:25%;
top:25%;
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
position: absolute;
width: 50%;
height: 50%;
background: green;
left: 25%;
top: 25%;
}