반응형
css에서 가로 중앙 정렬은 정말 간단하게 해결(text-align: center;)이 되는데 세로 중앙 정렬은 생각대로 하기가 힘들다. vertical-align: center;가 생각처럼 됐으면 좋겠지만 조건이 까다로워서 안 될 때가 더 많다.
그래서 그런지 검색해보면 세로 중앙 정렬 관련해서 글이 많고 방법도 다양하다. line-height를 부모와 똑같이 맞추든지, margin을 auto로 지정하든지, 심지어는 absolute로 지정한 다음 transform을 사용하는 방법까지... 모두 자식에게 속성을 지정해야 해서 순수 텍스트 노드는 안되고 div 등으로 감싸줘야 한다.
최근에 grid를 사용해서 간단하게 중앙 정렬하는 법을 알게 돼서 소개한다. grid를 사용하기 때문에 IE는 지원하지 않지만 이제 추모비도 세워진 마당에 굳이 신경 쓸 필요가...?
.parent {
display: grid;
place-items: center;
}정말 간단하다. 부모 노드에만 지정해주면 되기 때문에 자식 노드가 순수 텍스트여도 문제가 없다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: grid;
place-items: center;
width: 200px;
height: 200px;
border: 2px solid;
}
</style>
</head>
<body>
<div class="parent">가운데 배치</div>
</body>
</html>가운데 배치
반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| [JavaScript] query string를 object로 변환하기 (0) | 2023.04.23 |
|---|---|
| [JavaScript] Debounce, Throttle 함수 (0) | 2023.03.18 |
| [JavaScript] window.open()으로 연 창에서 onload 이벤트가 실행되지 않을 때 (2) | 2022.11.16 |
| Tailwind CSS 클래스 모음집 사이트 (0) | 2022.07.31 |
| [Node.js] 로컬 패키지 사용하기(+alias) (0) | 2022.06.13 |
| [Node.js] yarn upgrade를 해도 package.json가 그대로 일 때 (0) | 2022.03.19 |
| 토큰은 어디에 저장해야 하는가? (0) | 2022.02.14 |
| [자작] parcel-transformer-interpolate-html (0) | 2022.01.14 |