부모 div 내부에 수평으로 div를 중앙에 배치하는 방법

부모 div 내부에 수평으로 div를 중앙에 배치하는 방법

---

어떻게 중앙 않는 div부모의 내부에 수평 div으로 CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

---

부모 div에 너비가 없거나 너비가 넓고 자식 div의 너비가 더 작다고 가정합니다. 다음은 상단과 하단의 여백을 0으로 설정하고 측면이 자동으로 맞도록 설정합니다. 이것은 div를 중앙에 배치합니다.

div#child {
    margin: 0 auto;
}

---

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

---

흥미롭게도 두 개 이상의 div를 중앙에 배치하려는 경우 (중앙에 나란히 배치되도록) 다음 방법을 사용합니다.

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>   

---

왼쪽 및 오른쪽 여백에 "auto"값을 사용하여 브라우저가 내부 div의 양쪽에 사용 가능한 공간을 균등하게 분배하도록 할 수 있습니다.

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

---

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

참고 URL : https://stackoverflow.com/questions/1952256/how-to-center-horizontally-div-inside-parent-div