Body>

CSS body 가운데 정렬CSS body 중앙 정렬

목차

Show
  • 1 예시
  • 2 같이 보기

1 예시

<style>
body {
  width: 480px;
  margin: 0 auto;
}
.box1 { background: hotpink; }
.box2 { background: pink; }
</style>
<body>
	<div class='box1'>훈민정음 언해</div>
	<div class='box2'>
	우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라. 내 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이니라.
	</div>
</body>

2 같이 보기

  • CSS margin 속성
  • HTML body 태그

원본 주소 "https://zetawiki.com/w/index.php?title=CSS_body_가운데_정렬&oldid=738914"

분류:

  • CSS

수정 2021-04-18 생성 2014-11-26

편집자

문서 댓글 ({{ doc_comments.length }})

{{ zf.userName }}

로그인하시면 댓글을 쓸 수 있습니다.

{{ comment.name }} {{ comment.created | snstime }}

  • 분류 댓글:
  • {{cat.name.replace(/_/g,' ')}} ({{cat.cnt}})
  • {{comment.page_title}} {{comment.name}}

Published 2021. 11. 6. 21:13

Frontend/css

728x90

HTML 

1

2

3

4

5

<body>

<div id="box">

CONTENTS

</div>

</body>

cs

CSS

1

2

3

4

5

6

7

8

9

body {

    width:100%;

    height:100%;

}

#box{

    width:300px;

    height:300px;

    margin:0 auto;

}

cs

또는 수평에서 align-items, 중심축에서의 justify-content를 이용하여 다음과 같이 정렬할 수 있다.

1

2

3

4

5

6

7

body{

    background-color: var(--color-black);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

Colored by Color Scripter

cs

728x90

저작자표시 비영리 동일조건

'Frontend > css' 카테고리의 다른 글

[CSS/JS] Swiper  (0)2021.04.05
[CSS] div, 기타 클릭시 생기는 테두리 제거하는 방법  (0)2021.02.03

css body 가운데 정렬

Name

Password

Homepage

비밀글

    이전 글 추천

    [CSS/JS] Swiper

    2021.04.05

    복사했습니다!