如何在另一個div中居中div

Question

假設我有兩個嵌套div。如下所示： -

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

假設div1的高度和寬度爲100px。而div2的高度和寬度是50px。我該如何讓它們呈現同心圓狀態，即div2必須位於離所有邊（距離CSS）等距的div1內。

Answer 1

如果兩個div的固定尺寸爲，您可以簡單地在第二個div上放一個邊距。你的情況：

#div2 { 
margin: 25px; 
} 

或者，如果div的了可變尺寸，嘗試：

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

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

} 

OR：

#div1 { 
text-align: center; 

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

} 

這就是我知道要實現這一目標的方式： ）

Answer 2

您可以使用自動的左右邊距，如下圖翼：

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

首先，你可能想使用的寬度百分比，以使它們響應。

水平居中DIV2，插入你的CSS如下：

#div2 { 
    margin:0 auto; 
} 

要居中DIV2垂直，

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

Answer 4

我與@Praveen寫的評論表示贊同，但我會做一些調整：

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

#div2{ 
    margin: auto; 
} 

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> 

這裏是代碼顯示div在另一個div與中心css

Answer 6

//如果你有px或em等外部框和內部框的高度不在％或自動。使用公式

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