Centering Percentage Width/Height Elements

Source

• Evernote/IFTTT Feedly/Centering Percentage WidthHeight Elements.md

Summary

고정 크기가 아닌 퍼센트(%) 단위의 너비/높이를 가진 요소를 부모 요소의 정중앙에 배치하는 CSS 기법을 다룹니다. 전통적인 ‘top/left 50% + 음수 마진’ 방식은 고정 크기에는 유효하나, 퍼센트 크기에는 한계가 있음을 지적하며 CSS-Tricks의 해당 기법을 소개합니다.

Key Points

• 고정 크기 요소는 top/left 50%와 요소 크기의 절반인 음수 마진을 이용해 쉽게 중앙 정렬 가능
• 퍼센트(%) 단위의 너비/높이를 가진 요소는 음수 퍼센트 마진만으로는 완벽한 중앙 정렬이 어려움
• CSS-Tricks에서 제시하는 퍼센트 크기 요소의 중앙 정렬 해결책을 참조

Related

• CSS calc() 함수의 실용적 사용 사례

• Flexbox 레이아웃 가이드: 개념 및 10가지 실무 사례

• CSS의 매직 넘버 (Magic Numbers) 이해 및 회피

• CSS를 이용한 클라이언트 측 전체 텍스트 검색

• 스크롤 후 고정 콘텐츠 (Scroll-Then-Fix Content)

• 웹 컴포넌트(1): Keep calm and usetheplatform

• Query-Adaptive Image Search With Hash Codes

• Neighborhood Preserving Codes for Assigning Point Labels: Applications to Stochastic Search

• Google Hangouts Chat UI 복제 (CSS-Tricks)