無제
코드 해석_3/27_노란 박스를 화면 정중앙에 배치시키는 방법 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Translate 중앙 정렬 예제</title>
<style>
/* 1. 화면 전체를 꽉 채우는 컨테이너 */
.container {
width: 100vw;
height: 100vh;
position: relative;
background-color: #f8f9fa;
}
/* 2. 중앙에 위치할 노란 박스 */
.yellow-box {
width: 150px;
height: 150px;
background-color: #ffeb3b; /* 노란색 */
border: 3px solid #333;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
/* [중앙 정렬의 핵심] */
position: absolute;
top: 50%; /* 부모 높이의 50% 지점으로 이동 */
left: 50%; /* 부모 너비의 50% 지점으로 이동 */
transform: translate(-50%, -50%); /* 박스 크기의 절반만큼 역이동하여 중심 보정 */
}
</style>
</head>
<body>
<div class="container">
<div class="yellow-box">중앙 박스</div>
</div>
</body>
</html>
<코드 동작 원리>
top: 50%;
left: 50%;
/* 박스의 왼쪽 상단 꼭짓점을 화면 정중앙에 가져다 놓는다. (이 상태에선 박스가 우측 하단으로 쏠려 보인다.) */
transform: translate(-50%, -50%);
/* 박스 자신의 너비($X$)와 높이($Y$)의 딱 절반만큼 왼쪽과 위쪽으로 끌어당긴다. 결과적으로 박스의 정중앙이 화면의 정중앙과 일치하게 된다. */
'<401>' 카테고리의 다른 글
'<401>' Related Articles
more
