CSS：在另一个盒子内创建一个盒子

Question

CSS：在另一个盒子内创建一个盒子

3

我是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>

但是并不像预期的那样。

- maaz

你尝试过什么？你有搜索CSS对齐方面的内容吗？用谷歌搜索一下，你会很容易地找到答案。 - DaniP

在这里搜索答案：https://dev59.com/C3VD5IYBdhLWcg3wBW3d - Mardzis

5个回答

6

问题:

您遇到的问题是，默认情况下，您的子元素会将自己对齐到其父元素的左上角，而不是您期望的居中位置。为了使您的子元素水平居中，您可以使用以下css样式：

margin: 0 auto;

这将使它水平居中。

垂直对齐要稍微困难一些，因为它需要确保它从父元素的顶部和底部都正确对齐。您可以使用以下代码：

top: 25%;

然而，这种方法只有在您的子元素相对于父级div进行定位时才应该使用，因此我们需要在子元素中包含position:absolute;。

但是，如果我们这样做，那么最好使用left和top属性一起设置，像这样（在我们的子元素中）：

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

因此，我们来看一下第一个解决方案：

解决方案1：使用定位

通过使用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>

方案二：伪效果

您可能还想使用伪效果来减少标记（使页面加载速度稍快），因此我们可以大量使用伪效果（因为我们只使用一个元素而不是两个）：

如下所示：

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

- jbutler483

1

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

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

Demo：http://jsfiddle.net/gzterxrd/。

- Jason

1

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

或者您也可以使用 border。

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

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

或者您也可以使用伪元素。

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

- Vitorino fernandes

前两个解决方案对此来说过于夸张了。事实上，最后一个也是如此。 - jbutler483

0

你可以像这样做

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

- Pratyush Sharma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lurker · Accepted Answer

#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