CSS 포지션 (2)_자동으로 정가운데 배치?

저번에 다루었던 position 속성을 이어서 이야기 해보자!

간단히 복습해보면

부모요소에 position: relative, 자식요소에 position: absolute를 적용해주어야 한다.

 

또한 추가적으로

html상으로도 부모-자식 관계이어야만 position이 적용이 된다!

 

그 이후에 top, bottom, left, right를 이용해 상 하 좌 우에 배치를 할 수 있다.

각각의 기준점은 다음과 같다!

px, % 등으로 값을 넣어주어도 된다.

 

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

 

.parent {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
}
.child {
    position: absolute;
    background-color: steelblue;
    width: 100px;
    height: 100px;
    top:50%;
}

50%로 값으로 넣어주었다.

위 결과를 통해서 자식요소의 위쪽 모서리가 top요소의 기준인 것을 알 수 있다.

 

.child {
    position: absolute;
    background-color: steelblue;
    width: 100px;
    height: 100px;
    bottom:50%;
}

bottom속성은 아래 모서리가 기준이었다.

 

left, right도 마찬가지로 각각 왼쪽, 오른쪽 모서리가 기준이다.

---

요소를 정가운데로 배치하고 싶을 때는 어떻게 적용을 해야할까?

.child {
    position: absolute;
    background-color: steelblue;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
}

비스무리하게 가운데로 왔지만 top, left의 속성으로 인해서

자식요소의 왼쪽 상단 꼭지점이 가운데로 위치해 있는 상태이다.

 

 

이를 해결하기 위해서

transform: translate를 이용하면 된다.

흔한 좌표계 그대로 생각을 하면 되고,

기준은 좌측, 상단의 꼭지점이다!

 

적용을 한 요소가 값에 따라 조정이 된다.

 

.child {
    position: absolute;
    background-color: steelblue;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

-50%를 각각 적용해서 자기 자신의 절반만큼 이동을 시켜주었다.

 

이렇게 조정을 해서 정가운데로 배치를 할 수 있다!

 

만약 브라우저 자체의 정중앙에 위치 시키고 싶다면

부모요소에 relative를 적용하지 않으면 된다.