<div> 가운데 정렬 하는 방법

 

질문 : <div> 가운데 정렬 하는 방법

---

<div> 블록 요소를 가로로 가운데에 배치하고 최소 너비로 설정하려고합니다. 이를 수행하는 가장 간단한 방법은 무엇입니까? <div> 요소가 내 페이지의 나머지 부분과 인라인되기를 원합니다. 예를 들어 보겠습니다.

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

답변

---

너비가 고정되지 않은 div의 경우 (즉, div가 차지할 공간의 양을 알지 못함).

 

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}

<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

 

#yourdiv 의 너비는 동적입니다.-> 내부의 텍스트를 수용하기 위해 확장 및 축소됩니다.

Caniuse에서 브라우저 호환성을 확인할 수 있습니다.

출처 : https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css