position:absolute 를 이용한 중앙 배치

개요

• 어떤 요소를 페이지의 중앙에 배치하기 위해서 정렬 속성들을 사용하지만, 때에 따라 정렬 속성이 유리하지 않거나, 이용 할 수 없는 경우에 사용 할 수 있는 방법.
• position:absolute 인 요소의 양 끝을 기준점으로 지정하고, margin:auto 를 사용하여 외부여백의 크기를 자동으로 지정하여 중앙 배치 하는 방법.

• 배치의 기준이 되는 요소는 위치적 부모요소이다.
• 배치하고자 하는 요소는 반드시 배치하고자 하는 방향의 크기가 지정되어 있어야 한다.
  (수평 - width / 수직 - height)

사용방법

수평배치

1. position:absolute 인 요소를 기준으로 수평인 경우 left , right 의 값을 0으로 지정한다.
2. 해당 요소의 margin-left , margin-right 를 auto 로 지정한다.

<!--HTML-->
<div class="container">
    <div class="box"></div>
</div>

/*CSS*/
.container{
  position: relative; 
}

.box {
  width: 너비; /*필수*/
  height: 높이;

  position: absolute;
  left: 0;
  right: 0;

  margin: 0 auto;
  /*좌우 마진을 auto 로 지정*/
}

수직배치

1. position:absolute 인 요소를 기준으로 수직인 경우 top , bottom 의 값을 0으로 지정한다.
2. 해당 요소의 margin-top , margin-bottom 을 auto 로 지정한다.

<!--HTML-->
<div class="container">
    <div class="box"></div
</div>

/*CSS*/
.container{
  position: relative; 
}

.box {
  width: 너비;
  height: 높이; /*필수*/

  position: absolute;
  top: 0;
  bottom: 0;

  margin: auto 0;
  /*상하 마진을 auto 로 지정*/
}

• 배치 하고자 하는 요소의 기준이 될 부모요소에 static 이외의 position 속성값이 존재하여야한다.
  (배치하고자 하는 요소가 position:absolute 이기 때문에 반드시 위치적 부모요소가 필요)
• 요소에 너비와 높이가 지정되어 있지 않다면 요소의 크기가 지정한 top , bottom , left , right 까지 늘어나므로, 배치가 되지 않는다.
• 위 두 배치 방식을 이용하여 정 가운데로 배치가 가능하다.
  (너비와 높이 지정, 상하좌우 위치 0, 상하좌우 마진 auto)