Html CSS：在另一个盒子中创建一个盒子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27690404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Create one box inside another
提问by maaz
I am CSS beginner, want to create simple box and put another box exacly center of first box,
我是 CSS 初学者，想创建一个简单的框并在第一个框的中心放置另一个框，
tried something like this
尝试过这样的事情
#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>but not as expected.
但不像预期的那样。
回答by lurker
回答by jbutler483
Problem:
问题：
The issue you are having is that by default, your child elements align themselves to the top left of their parent element, and not in the center as you are expecting. In order to position your child element in the center (horizontally), you could use the css of:
您遇到的问题是，默认情况下，您的子元素将自己对齐到其父元素的左上角，而不是您期望的中心。为了将您的子元素定位在中心（水平），您可以使用以下 css：
margin: 0 auto;
which will place it horizontally in the middle.
这会将它水平放置在中间。
Vertically aligning is slightlymore difficult, as it involves ensuring it to be the correct from both top and bottom of your parent, so you could use:
垂直对齐稍微困难一些，因为它涉及确保它从父级的顶部和底部都是正确的，因此您可以使用：
top: 25%;
However, this should really only be used if your child is positioned in accordance to your parent div, and so we need to include position:absolute;into our child element.
但是，这实际上只应该在您的孩子根据您的父 div 定位时使用，因此我们需要包含position:absolute;到我们的子元素中。
However, if we do this, then it would be more beneficial to set it using both leftand topproperties, like so (in our child element):
但是，如果我们这样做，那么使用left和top属性设置它会更有益，就像这样（在我们的子元素中）：
position: absolute;
left:25%;
top:25%;
So, using this we come to our first solution:
所以，使用这个我们来到我们的第一个解决方案：
Solution 1: Using positioning
解决方案 1：使用定位
By using absolutepositioning, and making your parent have relativepositioning, this will solve your problem.
通过使用absolute定位，让你的父母有relative定位，这将解决你的问题。
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
position: absolute;
width: 50%;
height: 50%;
background: green;
left: 25%;
top: 25%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOX-EXAMPLE</title>
</head>
<body>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>Solution 2: Pseudo Effects
解决方案 2：伪效应
You may also want to use pseudo effects to reduce your markup (makes the page load slightly faster), and so we could use pseudo effects to a great beneficial degree (since we only use a single element instead of two):
您可能还想使用伪效果来减少标记（使页面加载速度稍快），因此我们可以在非常有益的程度上使用伪效果（因为我们只使用一个元素而不是两个）：
This is shown below:
这如下所示：
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first:after {
content:"";
width: 50%;
height: 50%;
background: green;
position: absolute;
left:25%;
top:25%;
}<div id="first"></div>回答by Jason
One way is to use auto margin with absolute positioning:
一种方法是使用具有绝对定位的自动边距：
#first #second {
width: 50%;
height: 50%;
position: absolute;
margin: auto;
background: green;
top :0; left: 0; right: 0; bottom: 0;
}
回答by Vitorino fernandes
#first {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#first #second {
width: 50%;
height: 50%;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div id="first">
<div id="second"></div>
</div>Or you can also use border
或者你也可以使用 border
#first {
width: 50px;
height: 50px;
background: green;
position: relative;
border:15px solid red;
}<div id="first"></div>or you can also use pseudo element
或者你也可以使用伪元素
#first {
width: 50px;
height: 50px;
background: green;
position: relative;
margin:50px;
}
#first:after{
content:'';
background: red;
position:absolute;
top:-20px;
left:-20px;
right:-20px;
bottom:-20px;
z-index:-1;
}<div id="first">
</div>回答by Pratyush Sharma
You can do something like this
你可以做这样的事情
#second {
width: 60px;
margin: auto;
background-color: green;
}
