프론트엔드 센트럴파크 (☞゚ヮ゚)☞

position:absolute 일 때, 가운데 정렬 본문

CSS

position:absolute 일 때, 가운데 정렬

자라나라나무나무나 2022. 3. 25. 21:26
#greeting {
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

transform을 사용하기 전, top과 left로 50% 를 적용하게 되면 

웹의 가운데 부분의 중앙 보다 하단에 위치하게 된다.

이 상태에서 transform으로 요소 사이즈만큼 반대로 이동을 시키면 된다.

transform: translate(-50%, -50%);

 

'CSS' 카테고리의 다른 글

placeholder focus 될 때 감추기  (0) 2022.04.13
placeholder 색, 글자, 모양 바꾸기  (0) 2022.04.13
:nth-child() 사용법  (0) 2022.03.22
animation  (0) 2022.01.07
transform-hover  (0) 2022.01.02
Comments