다른 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에 여백을 넣으면됩니다. 귀하의 경우 : div의 변수 크기을 가지고있는 경우

#div2 { 
margin: 25px; 
} 

은 또는, 시도 :

#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

follo와 같은 자동 왼쪽 및 오른쪽 여백을 사용할 수 있습니다 날개 :

<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 { 
    margin:0 auto; 
} 

이 DIV2 수직 중심을하기 위해 내가 @Praveen에 의해 쓰여진 의견에 동의

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

Answer 4

을하지만 일부 조정을 할 것 :

은 당신의 CSS에 다음을 삽입, 수평 DIV2을 센터 :

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

여기에 센터 CSS가있는 다른 div에서 div를 표시하는 코드입니다.

Answer 6

// % 또는 auto가 아닌 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>