[ CSS ] HTML / CSS Box 정가운데로 정렬하기

Box 하나만을 화면 정가운데에 정렬하고 싶을 때가 있는데

가운데로 정렬할 수 있는 방법은 있지만, 정가운데로 정렬하는 방법을 모를 수가 있다.

코드는 다음과 같다.

 

[ HTML ]

<div class="box"></div>

 

[ CSS ]

body{
	width: 100vw;
	height: 100vh;
}

.box{
	position: relative;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	background-color: black;
}

 

이렇게 하면 정가운데로 정렬이 가능하다.