问题：

Question

我是CSS初学者，想要创建简单的盒子并将另一个盒子放在第一个盒子的中心位置，

试过这样的事情

＆＃13;

#first {
    width: 100px;
    height: 100px;
    background: red;
}
#first #second{
    width: 50%;
    height: 50%;
    background: green;
}

＆＃13;

     
     <!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>BOX-EXAMPLE</title>
 </head>
 <body>
    <div id="first">
      <div id="second"></div>
     </div>
 </body>
</html>

＆＃13;

但不如预期。

Answer 1

#first {
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden;
}

#first #second{
    position: relative;
    width: 50%;
    height: 50%;
    margin: auto;
    margin-top: 25%;
    background: green;
}

Fiddle

Answer 2

问题：

您遇到的问题是，默认情况下，您的子元素会将其自身对齐到其父元素的左上角，而不是您期望的中心。为了将您的子元素放在中心（水平），您可以使用以下css：

margin: 0 auto;

将水平放置在中间。

垂直对齐稍微更难，因为它涉及确保它从父母的顶部和底部都是正确的，所以你可以使用：

top: 25%;

但是，如果您的孩子按照您的父div进行定位，那么这只应该被使用，因此我们需要将position:absolute;包含在我们的子元素中。

但是，如果我们这样做，那么使用left和top属性设置它会更有利，就像这样（在我们的子元素中）：

position: absolute;
left:25%;
top:25%;

所以，使用这个我们来到我们的第一个解决方案：

解决方案1：使用定位

通过absolute定位，让您的父母定位relative，这将解决您的问题。

＆＃13;

#first {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
       }

       #first #second {
         position: absolute;
         width: 50%;
         height: 50%;
         background: green;
         left: 25%;
         top: 25%;
       }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>BOX-EXAMPLE</title>
</head>

<body>
  <div id="first">
    <div id="second"></div>
  </div>
</body>

</html>

＆＃13;

解决方案2：伪效果

您可能还想使用伪效果来减少标记（使页面加载速度稍快），因此我们可以将伪效果用于非常有益的程度（因为我们只使用单个元素而不是两个）： / p>

如下所示：

＆＃13;

   #first {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
   }
   #first:after {
     content:"";
     width: 50%;
     height: 50%;
     background: green;
     position: absolute;
     left:25%;
     top:25%;
   }

＆＃13;

<div id="first"></div>

＆＃13;

Answer 3

一种方法是使用具有绝对定位的自动边距：

#first #second {
    width: 50%;
    height: 50%;
    position: absolute; 
    margin: auto;
    background: green;
    top :0; left: 0; right: 0; bottom: 0;
}

演示：http://jsfiddle.net/gzterxrd/

Answer 4

＆＃13;

#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%);
}

＆＃13;

<div id="first">
  <div id="second"></div>
</div>

＆＃13;

或者您也可以使用border

＆＃13;

#first {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  border:15px solid red;
}

＆＃13;

<div id="first"></div>

＆＃13;

或者您也可以使用伪元素

＆＃13;

#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;
}

＆＃13;

<div id="first">
  
</div>

＆＃13;

Answer 5

你可以做这样的事情

#second {
  width: 60px;
  margin: auto;
  background-color: green;
}

CSS：在另一个框内创建一个框

5 个答案:

问题：

解决方案1：使用定位

解决方案2：伪效果