웹 요소 가운데로 배치하기

방법1) 웹 요소의 너비(width) 값을 안다면 

요소의 width 값을 지정했다면 좌우의 마진을 auto로 지정해서 가로로 중앙에 배치할 수 있습니다. 단, 이 방법은 width 값을 기준으로 하기 때문에 가로 방향으로만 중앙 정렬합니다.

 

<div id="wrapper">
  <div class="box"></div>
</div>

 

 

<style>
#wrapper {
  width: 600px;
  height: 200px;
  border: 1px solid #000;
}
.box {
  width: 100px;
  height: 100px;
  margin: 10px auto;
  background: green;
}
</style>

 

방법 2) 요소의 너비(width) 값을 모른다면 

가로로 중앙에 배치하려면 부모 요소의 50% 위치로 옮겼다가 (시작점이 50% 위치가 됨)

다시 요소 너비의 반을 왼쪽으로 이동시킵니다.
그림으로 보면 이런 형태가 되겠죠. 같은 방법으로 세로로 가운데 배치할 수 있습니다.

<div id="wrapper">
  <div class="box"></div>
</div>

 

 

#wrapper {
  width: 600px;
  height: 200px;
  position: relative;   /* 부모 요소에 position: relative 포함 */
  border: 1px solid #000;
}
.box {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;    
  left: 50%;   /* 가로 시작점 50% */
  top: 50%;    /* 세로 시작점 50% */
  transform: translate(-50%, -50%);    /* 트랜스폼을 통해 가로와 세로로 50%씩 이동 */
}

 

방법 3) 플렉스 박스 사용하기

마진이나 left/top 를 사용한 방법은 CSS2의 오래된 속성을 활용한 방법입니다. 최근 CSS 레이아웃을 위한 새로운 방법들이 많이 등장했는데 그 중에서 플렉스 박스 레이아웃을 사용하면 웹 요소를 화면 중앙에 배치하기 쉽습니다.

플렉스 박스 레이아웃을 적용하려면 부모 요소(#wraaper)를 플렉스 컨테이너로 만들고 justify-content 속성과 align-items 속성을 사용해 가로와 세로로 중앙 정렬합니다.

<div id="wrapper">
  <div class="box"></div>
</div>

 

부모 요소에서 모든 속성을 지정할 수도 있고

#wrapper {
  width: 600px;
  height: 200px;
  border: 1px solid #000;
  display: flex;   /* 플렉스 박스 설정 */
  justify-content: center;   /* 가로 중앙 정렬 */
  align-items: center;   /* 세로 중앙 정렬 */
}
.box {
  width: 100px;
  height: 100px;
  background: green;
}

 

부모 요소를 플렉스 컨테이너로 지정한 후 자식 요소에서 세로 정렬 방법을 지정할 수도 있습니다.

#wrapper {
  width: 600px;
  height: 200px;
  border: 1px solid #000;
  display: flex;   /* 플렉스 박스 설정 */
  justify-content: center;   /* 가로 중앙 정렬 */
}
.box {
  width: 100px;
  height: 100px;
  background: green;
  align-self: center;
}

 

 

방법 4) CSS Grid 레이아웃 사용하기

CSS3에 와서 새로 등장한 레이아웃 방법 중 하나가 CSS Grid 레이아웃입니다. 이 방법을 사용하려면 부모 요소(#wrapper)에 Grid 관련 속성을 추가하고 justify-content와 align-items 속성을 center로 지정합니다. CSS Grid 레이아웃에서는 justify-content와 align-items 속성을  줄여서 place-items 라고 작성할 수 있습니다.

<div id="wrapper">
  <div class="box"></div>
</div>

 

 

#wrapper {
  width: 600px;
  height: 200px;
  border: 1px solid #000;
  display: grid;   /* 그리드 컨테이너 설정 */
/*   justify-content: center;
  align-items: center; */
  place-items: center;  /* 단축 속성 */
}
.box {
  width: 100px;
  height: 100px;
  background: green;
}

 

CSS 그리드 역시 부모 요소에서 그리드 컨테이너로 지정한 후, 자식 요소에서 정렬 방법을 지정해도 됩니다.

#wrapper {
  width: 600px;
  height: 200px;
  border: 1px solid #000;
  display: grid;   /* 그리드 컨테이너 설정 */
}
.box {
  width: 100px;
  height: 100px;
  background: green;
  align-self: center;
  justify-self: center;
}