[CSS] div 가운데 정렬하기 [position: absolute일 때 가운데 정렬하는 방법]

- div 가운데 정렬하기 [position: absolute일 때 가운데 정렬하는 방법]

div를 사용하다 보면 가운데 정렬하고 싶을 때가 많다.
아래와 같은 div가 있고, child를 가운데 정렬하고 싶다고 보자.

<div class="parent">
  <div class="child"></div>
</div>

 

눈으로 볼 수 있도록 아래와 같은 스타일을 추가해준다.
이렇게 하면 왼쪽 상단에 갈색 네모가 위치해 있다.

.parent {
    background-color: white;
    border: solid 1px black;
    width: 200px;
    height: 200px;
}
.child {
    background-color: brown;
    width: 50px;
    height: 50px;
}

---

---

- 상단 가운데 정렬

이 위치를 상단 가운데로 정렬해보려고 한다.
child 클래스에 left와 margin-left에 값을 주면 된다.

.parent {
    /* position 추가 */
    position: relative;
}
.child {
    /* position, top, left 추가 */
    position: absolute;
    left: 50%;
    
    /* margin을 이용한 방법 */
    margin-left: -25px; /* width의 50% */
}

---

 

margin 말고도 transform 속성으로도 가운데 정렬을 할 수 있다.

.child {
    /* position, top, left 추가 */
    position: absolute;
    top: 50%;
    left: 50%;

    /* transform을 이용한 방법 */
    transform: translate(-50%, 0);
}

---

- 중앙 가운데 정렬

이번에는 정가운데에 정렬을 해보려고 한다.
child 클래스에 top과 margin-top에 값을 추가해주면 된다.

.parent {
    /* position 추가 */
    position: relative;
}
.child {
    /* position, top, left 추가 */
    position: absolute;
    left: 50%;
    top: 50%;
    
    /* margin을 이용한 방법 */
    margin-left: -25px; /* width의 50% */
    margin-top: -25px;  /* height의 50% */
}

---

 

정가운데 정렬 또한 transform 속성으로 가능하다.

.child {
    /* position, top, left 추가 */
    position: absolute;
    top: 50%;
    left: 50%;

    /* transform을 이용한 방법 */
    transform: translate(-50%, -50%);
}

---

- 참고자료

css absolute 일 때 가운데 정렬 방법

---