요소를 수평 중앙에 배치하는 방법

 

질문 : 요소를 수평 중앙에 배치하는 방법

---

CSS를 사용하여 다른 <div> <div> 가로 중앙에 어떻게 배치 할 수 있습니까?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

답변

---

이 CSS를 내부 <div> 적용 할 수 있습니다.

#inner {
  width: 50%;
  margin: 0 auto;
}

width 를 50% 로 설정할 필요는 없습니다. <div> 보다 작은 너비는 작동합니다. margin: 0 auto 는 실제 센터링을 수행합니다.

Internet Explorer 8 이상을 대상으로하는 경우 대신 다음을 사용하는 것이 좋습니다.

#inner {
  display: table;
  margin: 0 auto;
}

내부 요소의 중심을 수평으로 만들고 특정 width 를 설정하지 않고 작동합니다.

여기에서 작업 예 :

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

수정

flexbox 사용하면 div의 스타일을 가로 및 세로 중앙에 매우 쉽게 지정할 수 있습니다.

 

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

div를 세로 중앙에 정렬하려면 align align-items: center 속성을 사용하세요.

출처 : https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element