Question

假设我有两个嵌套的div。如下所示： -

<div id="div1">Some name here
  <div id="div2">DIV2</div>
</div>

假设div1的高度和宽度为100px。 div2的高度和宽度为50px。如何让它们看起来是同心的，即div2必须位于div1的所有边上等距离（使用CSS）。

Answer 1

如果两个div有固定的尺寸，你可以简单地在第二个div上加一个边距。在你的情况下：

#div2 {
 margin: 25px;
}

或者，如果div具有可变维度，请尝试：

#div1 {
 position: relative;
}
#div2 {
position:absolute;
left:50%;
top:50%;

transform: translate(-50%,-50%);

}

或者：

#div1 {
text-align: center;

}
#div2 {
display: inline-block;
vertical-align: middle;

}

这就是我所知道的实现目标：）

Answer 2

我同意@Praveen写的评论，但我会做一些调整：

#div1{
   display: table-cell;
   vertical-align: middle;
}

#div2{
   margin: auto;
}

Answer 3

您可以使用自动左右边距，如下所示：

<style>
    div#container {
        border: 1px solid #000000;
        width: 500px;
        height: 200px;
    }

    div#inner {
        border: 1px solid #FF0000;
        width: 200px;
        height: 100px;
        margin: 0 auto;
    }
</style>

<div id="container">
    <div id="inner"></div>
</div>

JSFiddle Demonstration >

Answer 4

首先，您可能希望使用宽度百分比来使其响应。

要水平居中div2，请在css中插入以下内容：

#div2 {
    margin:0 auto;
}

垂直居中div2，

#div1 {
    display:block;
    height: 100%;
}
#div2 {
    vertical-align: middle;
    display:block;
}

Answer 5

   <style>
   #div1 
   {
   border: 1px solid blue; 
   width: 100px;
   height:100px;
   }
   #div2
   {
   margin-left:20px;
   border: 1px dotted red;
   width:50px;
   height:50px;
   }
   </style>


   <div id="div1">Some name here
   <div id="div2">DIV2</div>
   </div>

这是在中心css

的另一个div中显示div的代码

Answer 6

//如果外框和内框的高度都在px或em等中，而不是％或auto。这里只是使用公式给出的逻辑

 #div1 {
   display:block;
   height: 500px;
   width:50%;
   margin: 0 auto;
   border: 1px solid red;
 }
 #div2 {      
    display:block;
    width:50%;
    height:60px;
    border: 1px solid green;
    margin: -moz-calc( (500px - 60px) / 2 ) auto; // (height of outer box - height of inner box )/2 
 }

 //may be you can manage height dynamically using js this should work for height in % also  
 <script type="text/javascript">
   var div1_height = $('#div1').height(); 
   var div2_height = $('#div2').height(); 

   var top_margin =  (div1_height-div2_height)/2;
   $('#div2').css('margin',top_margin+'px auto');
  </script>

如何将div放在另一个div中

7 个答案: