css position 중앙정렬

·2022년 6월 18일
0

position이 적용 되었을 때

  • absolute가 적용되면 margin: 0 auto; 적용 불가. (relative는 가능)

1. position: 50%;, 요소가 가지는 값의 반을 음수(-)로 적용

  • 가로 세로 값을 알아야 함.
top: 50%; left: 50%; /* positon 중앙 위치 */
margin-left: -100px; margin-top: -50px; 
/* 요소의 크기가 200x100 이라고 가정.
height=100px의 반 width=200px의 반  */

2. position: 0;, margin: auto;

  • 가로 세로 값을 알아야 함.
top: 0; right: 0; bottom: 0; left: 0; margin: auto;

3. position: 50%;, transform: translate 이용

  • 가로 세로 값을 몰라도 가능.
  • 가장 많이 쓰는 방법.
top: 50%; left: 50%;
transform: translate(-50%, -50%);
profile
저녁놀 마을 사람

2개의 댓글

comment-user-thumbnail
2022년 7월 11일

와 덕분에 문제가 해결됐어요

1개의 답글

관련 채용 정보