Grid 수직정렬 제대로 안됩니다.
72
3 asked
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 중앙 정렬의 모든 것</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 활용도 높은 CSS3 속성을 활용한 실전 스킬과 팁-->
<!-- CSS 중앙 정렬의 모든 것 -->
<div class="element">
This is Content
</div>
<!-- <div>
<img src="images/icon-lock.svg"> <span>해당 컨텐츠는 회원전용입니다.</span>
</div> -->
</body>
</html>/* XEION CDN */
/* @import url('//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); */
/* Google Web Font */
/* @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); */
* {
font-family: 'Raleway', sans-serif;
}
body {
height: 100vh;
/* Flex */
/* display: flex;
justify-content: center;
align-items: center; */
/* Grid */
/* display: grid;
justify-content: center;
align-items: center */
/* place-item */
display: grid;
place-items: center;
}
.element {
border: 5px solid #000;
background-color: skyblue;
color: #fff;
width: 200px;
height: 200px;
/* Position */
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translateX(-50%);
transform: translateY(-50%); */
/* Margin */
/* margin: auto; */
}
선생님 강의와 똑같이 적용했는데 제 화면에서는 .element가 위쪽에 붙어있어서요. flex로 정렬했을 때는 중간에 잘 오는데 grid로 정렬하니까 수직 중앙 정렬이 안먹습니다. 왜 그런건가요?ㅠㅠ 이유를 알고싶습니다.
Answer 1
1
올리신 코드 복사해서 확인해 보니 수직 수평 중앙 잘 정렬됩니다.
아마도 브라우저를 축소하거나 확대하거나 이런 문제인 듯 합니다.
그리고 body에 margin: 0; 넣어주시면 미세하게 생기는 여백을 없애서 스크롤바도 생기지 않습니다.
강의 내용 관련 문의드립니다 (animation)
1
55
2
강의 화면이 안나옴
1
208
1
로그인 폼 CSS 디자인 코드 질문 있습니다.
1
235
1
inherit와 100%의 차이가 궁금합니다.
1
322
2
<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.
1
201
1
수업자료는 없나요?~
1
325
1
[공유] 부모 요소가 position: absolute 인 경우에 대한 설명
1
663
1
float: right 요소가 아래에 배치되는 이유 쉽게 설명
1
863
1
안녕하세요 가상클래스 포지션 활용 질문드립니다
1
386
2
hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중
3
460
2
nav 태그
1
1129
1
css 선택자의 모든-선택자 우선순위가 중요한 이유 강의 내용중에서
1
545
1
강의자료는 어디서 받을 수 있나요?
1
348
1
before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ
1
673
2
유튜브 영상 파일
1
300
1
모바일 css 작업(단위)
1
295
1
유튜브의 초급,중급 이론과는 어떤차이가 있나요?
1
260
1
선생님 질문이 있습니다. (float 속성)
1
262
1
파일다운로드와 관련하여
1
256
1
포지션(position) 속성(z-index와 포지션 속성 우선순위) 강의 질문있습니다.
1
401
1
오타(contaner)
1
241
1
float 속성을 설정했을 때 display: inline-block이 되는 것에 관련하여 질문이 있습니다.
1
2281
2
margin: auto;
1
354
1
label 태그의 사용법이 궁금합니다
1
352
2