[CSS] 가운데 정렬

shinny·2024년 1월 23일

HTML, CSS

목록 보기
2/5

1. 인라인 요소 가운데 정렬

  • 한줄인 요소
  • 부모요소에 적용
text-align: center;
line-height : ;

2. 블럭 요소 가운데 정렬

width : ;
margin : 0 auto;
height : ;

3. div 안의 div 가운데 정렬

  • 부모 요소에 적용
width : ;
text-align : center
  • 자식 요소에 적용
display : inline-block

4. position 이용

  • 부모 요소
position : relative;
  • 자식 요소
// 1
position : absolute;
top : 50%
left : 50%
transform : translate(-50%, -50%)

// 2
position : absolute;
margin : auto;
top : 0;
left : 0;
bottom : 0;
right : 0;

5. flex

  • 부모 요소
height : ;
display : flex;
justify-content: center;
aligh-items: center;
profile
꾸준히, 성실하게, 탁월하게 매일 한다

0개의 댓글