CSS 가로 가운데, 세로 가운데 정렬 - 수평, 수직 중앙 정렬 방법 (flex 이용)
페이지 정보
조회 842회 작성일 22-06-02 11:34
본문
가로, 세로 한 가운데
flex를 이용한 중앙 정렬
화면 한 가운데 중앙 정렬 방법은 어려 가지가 있다. 역으로 말하면, 잘 안 되는 경우가 많기 때문에 이런 저런 방법들이 있는 것이다.
그 중, 가장 확실하게 되는 flex 이용 방법을 소개한다.
가로 가운데, 세로 가운데 정렬 - 수평, 수직 중앙 정렬 방법 (flex 이용)
가로, 세로 가운데 정렬 방법
flex는 CSS3 버전에서 새로 추가된 방식이다.
애초에 레이아웃 배치를 목적으로 만들어졌기 때문에 전체 모양을 잡는 데에 매우 편하다.
사용 방법도 아주 간단하다.
만약 A라는 요소에 중앙 정렬을 하고 싶다면, A를 감싸고 있는 B에 이 속성을 정해주기만 하면 된다.
먼저 HTML로 적용될 요소를 만든 뒤, CSS파일에서 "display:flex" 속성을 주면 기본 준비가 끝난다.
그 후 align-items:center와 justify-content:center를 적어주면 한 가운데에 정렬이 될 것이다.
수평, 수직 가운데 정렬 방법 예제 소스
기본 구조는 아래와 같다. 먼저 HTML을 구성할 것이지만, 이것은 정렬의 대상일 뿐이다.
[code]
<div class="감싸는이름">
<div class="대상이름">
</div>
</div>
[/code]
이제, 실제로 가운데 중앙 정렬을 위한 css 스타일을 적용할 차례다.
[code]
<style>
.감싸는이름 { display:flex; justify-content:center; align-items:center; }
.대상이름 { 크기나 모양 등의 속성 }
</style>
[/code]
물론, 이름은 THML에 적힌 것과 같아야 한다.
주의할 점은 가운데에 있어야 할 것에 코드를 적는 것이 아니라, 감싸고 있는 것에 적어야 한다는 것이다.
한 가운데에 정렬시키기 코드 설명
감싸고 있는 요소의 Style 코드에 display:flex가 사용되었다. 즉, "내 안에 들어 있는 요소에 적용하겠다"는 이야기다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그 후에 추가로 두 개의 flex 속성이 있는데, 정리하자면 아래와 같다.
- justify-content:center : 좌우 가로의 수평 가운데 정렬 속성
- align-items:center : 상하 세로의 수직 가운데 정렬 속성
이 둘 중 하나만 사용해도 되고, 둘 다 사용해도 된다.
보통은 하나만 사용하는데, 둘 다 사용한다면 영화가 시작할 때 나오는 제목처럼 한 가운데에 나타나게 할 때 사용하는 것이다.