-
[CSS][HTML] <div> 세로 정렬하기프로그래밍/Web(CSS + HTML + JS + PHP ) 2019. 4. 5. 20:42728x90
CSS에서 가로 정렬은 굉장히 쉬운 일이지만, 세로 정렬은 굉장히 까다롭다.
특히 width(높이)와 height(너비)를 100%로 설정한 경우에는 더더욱히 말이다.
머리를 싸매고 구글링을 하고 여러 시도를 거듭한 끝에 성공적으로 작동되는 코드를 만들어 냈다.
123456789101112131415161718192021222324252627282930313233343536373839<!doctype html><html lang="ko"><head><meta charset="utf-8"><title>Not Have Data!</title><style>html, body {margin: 0;padding: 0;height: 100%;}.table0 {width: 100%;height: 100%;background-color: #888888;}.data {position: absolute; top: 50%; transform: translateY(-50%);width: 100%;margin: 0;oveflow-x:hidden;border: 1px solid #444444;background-color: #444444;}h1 {text-align: center;color: #ffffff;}</style><!-- MakeBy : syudal.tistory.com--></head><body><div class="table0"><div class="data" overflow:hidden;><h1>데이터 없음</h1></div></div></body></html>cs height구문의 문제인지, height:100%가 적용되지 않는 버그가 흔하기에 html, body 전체에 선언해주었다.
아래의 사진을 보면 알겠지만, 웹 브라우저의 크기에 따라 유동적으로 '데이터 없음' <div>를 세로 정렬해준다.
728x90댓글