이 전 글에서 width와 margin:auto를 이용해
div 안의 div를 수평정렬하는 방법을 알아봤습니다.
그 코드를 다시 한번 살펴보겠습니다.
----- HTML 코드 -----
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
----- CSS 코드 -----
.container {
background-color: yellow;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
margin: auto;
}
그 결과는 아래와 같습니다.
이 방법은 수직 정렬에는 사용할 수 없습니다.
display:flex 를 이용하여 수평 가운데 정렬을 하는 방법을 알아보겠습니다.
----- CSS 코드 -----
.container {
background-color: yellow;
display: flex;
align-items: center;
justify-content: center;
}
.item {
background-color: gray;
height: 100px;
width: 200px;
}
그 결과는 아래와 같습니다.
.item 의 margin 속성은 이제 필요가 없으므로 삭제하였습니다.
대신 정렬하고자 하는 요소( .item )의 부모요소( .container )에
display:flex 속성을 적어주어 자식요소를 수평 정렬 상태로 만들어줍니다.
그 후 justify-content: center 를 이용하여 메인 축(여기에서는 좌우 너비)의 가운데 정렬을 해주고,
align-items: center 를 이용하여 크로스 축(여기에서는 상하 높이)의 가운데 정렬을 해줍니다.
display:flex 에 대한 더 깊은 설명은 추후에 적어보겠습니다.
< 관련 글 >
[CSS] div 안의 div를 가운데 정렬하기, 수평만, width&margin:auto
[CSS] div 안의 div를 가운데 정렬하기, 수평만, width&margin:auto
위의 코드와 같이 div가 중첩되어 있을 경우 안 쪽(자식요소)의 div를 바깥쪽(부모요소)의 div의 가운데로 정렬할 때 필요한 CSS 코드를 알아보겠습니다. 이 때 필요한 CSS 코드는 width와 margin: auto 입
webprogramming.tistory.com
[CSS] div 안의 div를 가운데 정렬하기2, 수평&수직, position
[CSS] div 안의 div를 가운데 정렬하기2, 수평&수직, position
이번에는 position을 이용하여 수평 가운데, 수직 가운데 정렬을 하는 방법을 알아보겠습니다. 먼저 width & margin:auto 를 이용한 코드를 보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { backg
webprogramming.tistory.com