콘텐츠를 가로, 세로 중앙 정렬하는 방법들~

이 주제를 가지고 온 이유는 브라우저에서 콘텐츠를 전체로 열었을 때 중앙 정렬까지는 다 코딩할 수 있다고 생각한다.

 

프로젝트 디자인 시안이 반응형으로 전체 브라우저일 경우 중앙 정렬 있었고 아니것도 있다.

모바일로 넘어갈 때 스크롤이 생기면서 글이 위에서부터 보여야 하는 디자인 시안이 전달이 되었다.

정말 프로라고 생각하고 아래와 같이 사용해서 중앙 정렬을 시켰다.

 

	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;

 

 

그리고 브라우저를 줄렸다.

근데 단순하게 아니 당연하게 브라우저가 작아지면 첫 문장부터 보일 거라고 생각했다.

 

정말 당연하게~~

 

근데 아니네;;;

 

브라우저가 작아졌을 때 제일 첫 문장이 아니 중앙의 문구가 보이는 것이다 왜??

그래서 레이어 팝업처럼 positing : fixed를 사용해서 아래와 같이 해보려고 했지만 반응형이기도 하지만 콘텐츠 내용이 많아 문제가 된다.

 

 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;

 

아무리 생각해도 이건 아닌데;;;

 

그래서 찾다 보니 아래와 같이 display: table; 을 이용해서 코딩해 봤다.

 

	.body{
		display: table;
		height: 100vh;
	}
	.contents{
		display: table-cell;
		vertical-align: middle;
	}

오~~ 된다!!

 

 

근데 되네 그것도 브라우저가 작아져도 디자인 시안처럼 첫 문장이 보이는 것이다.

참고로 display: table;를 사용해서 중앙 정렬을 할 때에는 body에 해당하는 태그에 꼭!!

높이 값을 줘야 한다는 거~

단순하게 어느 높이든 중앙에 와야 하기 때문이다~

 

제가 말재주가 없어 설명이 이해가 안 될 수도 있지만, 댓글 달아 주시면 최대한 빨리 답변드리겠습니다.

지금까지 혼자 말이었습니다.

 

 

감사합니다!!