예를 들어 아래와 같은 코드가 있을 때,
<html>
<body>
<div class="container">
<article style="width:100px;height:100px;background-color:#000">
</article>
</div>
<body>
</html>
article을 중앙에 배치하기 위해 flex를 사용한다면, .container의 스타일을 다음과 같이 설정할 것이다.
.container{ display:flex; justify-content:center; align-items:center; }
그러나 이는 실패한다.
가로로는 정렬이 되었지만, 세로로는 위에 붙어있다. 세로로도 중앙 정렬을 해야 한다.
그렇다면 어떻게 하면 article을 한가운데에 배치할 수 있을까?
한줄만 추가해주면 된다.
.container{ display:flex; justify-content:center; align-items:center; height:100vh }
vh는 viewport height의 약자이다.
이제 .container는 사용자가 보이는 화면 전체를 높이로 갖는다.
반응형
'Web Programming > HTML & CSS' 카테고리의 다른 글
| [CSS] img태그의 src를 css로 대체하는 방법 (2) | 2022.01.20 |
|---|---|
| [CSS] img태그에서 ::after 및 ::before 안되는 이유 (0) | 2022.01.20 |
| [CSS] em과 rem, 제대로 알고 사용하자! (0) | 2021.12.20 |
| [CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 (0) | 2020.10.07 |
| CSS에서의 vh와 vw (0) | 2018.09.26 |
