[CSS] ⑧ CSS 화면 중앙 배치

티스토리 뷰

프론트엔드/CSS

[CSS] ⑧ CSS 화면 중앙 배치

doeunnkimm 2022. 8. 17. 13:10

▶CSS 화면 중앙 배치

콘텐츠를 가로나 세로 혹은 가로/세로 즉 중앙에 배치하고 싶을 때의 방법을 공부해보겠습니다.

1) 가로에서 중앙 배치

① margin 이용

margin은 컨텐츠 바깥 부분의 여백을 의미합니다.

이 방법은 바깥 여백을 이용하여 중앙에 배치합니다.

<body>
        <section>
            <div class="div-h-1">margin left/right</div>
        </section>
</body>

<style>
    .div-h-1 {
        margin-left: auto;
        margin-right: auto;
    }
</style>

실행 화면은 아래와 같습니다.

margin-left와 margin-right를 auto로 주는 것은 좌우 바깥 여백을 자동으로 해서 가로 기준 중앙에 배치하는 것입니다.

② position: relative & transform 이용

position은 컨텐츠의 위치에 관해 설정해줄 수 있습니다.

이번에 사용할 position: relative는 컨텐츠들의 위치를 기준으로 위치를 이동시킬 수 있습니다.

<body>
   	<section>
		<div class="div-h-2">position/transform</div>
	</section>
</body>

<style>
    .div-h-2 {
        position: relative;
        left: 50%; /*가로 넓이 중 50% 부분까지 이동*/
        transform: translateX(-50%); /*컨텐츠의 절반을 왼쪽으로 이동*/
    }
</style>

실행 화면은 아래와 같습니다.

position: relative를 해줘서 상위 엘리먼트<selection>안에서 위치를 relative하게 이동할 수 있게 해줍니다.

left: 50%와 transform: transleteX(-50%) 적용 과정은 다음과 같습니다.

③ display: flex | grid

display: flex와 grid를 상위 컨텐츠의 속성에 주어서 그 내부에 있는 컨텐츠들의 위치를 변경할 수 있습니다.

내부 컨텐츠를 어떤 식으로 정렬할 지는 아래 그림과 같은 종류 중 하나로 결정해야 합니다.

우리는 가로 중앙 배치를 하고 싶으니까 center를 이용하면 되겠습니다.

<body>
	<section class="div-h-1"><div>display: flex; justify-content: center;</div></section>
    <section class="div-h-2"><div>display: grid, justify-content: center;</div></section>
</body>

<style>
    .div-h-1 {
        display: flex;
        justify-content: center;
    }
    
    .div-h-2 {
        display: grid;
        justify-content: center;
    }
</style>

실행 화면은 아래와 같습니다.

2) 세로에서 중앙 배치

① position / margin 이용

이 방법은 가로에서 중앙 배치하는 방법과 유사합니다.

다만, 구체적인 px크기를 이용할 것이기 때문에 상위 컨텐츠의 크기를 알아야 합니다.

<body>
    <section>
    	<div class="div-v-1">top/margin top</div>
	</section>
</body>

<style>
	.div-v-1 {
   		position: relative;
 		top: 50%;
  		margin-top: -50px}
</style>

실행 화면은 다음과 같습니다.

② position / transform 이용

이 방법 역시 가로에서 중앙 배치 방법과 유사합니다.

바로 코드를 살펴봅시다.

<body>
    <section>
        <div class="div-v-2">position/transform(박스 높이를 모를 경우)</div>
    </section>
</body>

<style>
    .div-v-2 {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

③ display: flex / grid

이벤에는 flex/grid로 설정한 상위 컨텐츠의 내부 컨텐츠들을 세로 기준으로 정렬하는 방법에 대해 알아보겠습니다.

아래 그림과 같은 종류들이 있습니다.

우리는 세로에서 중앙에 배치하고 싶으니 이번에도 center를 이용하면 되겠습니다.

<body>
    <section class="div-hv-1"><div>display: flex;</div></section>
    <section class="div-hv-2"><div>display: grid;</div></section>
</body>

<style>
    .div-v-1 {
        display: flex;
        align-items: center;
    }
    
        .div-v-2 {
        display: grid;
        align-items: center;
    }
</style>

3) 중앙 배치

이번에는 가로 중앙과 세로 중앙을 혼합하여 상위 컨텐츠의 중앙에 배치해보도록 하겠습니다.

① position / margin 이용

<body>
    <section>
        <div class="div-hv-1">margin: left/right</div>
    </section>
</body>

<style>
    .div-hv-1 {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        top: 50%;
        margin-top: -50px;
    }
</style>

② position / transform 이용

<body>
    <section>
        <div class="div-hv-2">position/transform(박스 높이를 모를 경우)</div>
    </section>
</body>

<style>
    .div-hv-2 {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

③ display: flex / grid

한번더 말하자면, flex / grid 성질은 상위 컨텐츠에 주는 속성입니다.

<body>
    <section class="div-hv-1"><div>display: flex;</div></section>
    <section class="div-hv-2"><div>display: grid;</div></section>
</body>

<style>
    .div-hv-1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div-hv-2 {
        display: grid;
        justify-content: center;
        align-items: center;
    }
</style>

여기까지 CSS 중앙 배치에 대해 알아보았습니다.

728x90

LIST

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] ⑩ Flex의 모든 것 (0)	2022.08.22
[CSS] ⑨ 예제로 보는 CSS 애니메이션 (0)	2022.08.18
[CSS] ⑦ 접근성(Accessibility) (0)	2022.07.14
[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리 (0)	2022.07.13
[CSS] ⑤ flex를 이용한 레이아웃 만들어 보기 (0)	2022.07.13

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

doeunn.log

티스토리 뷰