[CSS] 요소 수평/수직 중앙 위치 시키기

Narcoker·2023년 5월 24일
0

CSS

목록 보기
18/40

/* 틀(부모요소) */
.parent { 
	position: relative;
    width: 600px;
    height: 600px;
    ...
}

/* 중앙에 위치시킬 대상(자식요소) */
.child {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%; /* 부모 요소 세로 길이의 절반만큼 이동 */
	left: 50%; /* 부모 요소 가로 길이의 절반만큼 이동 */
	transform: translate(-50%, -50%); /* 자기 가로 세로 크기의 절반만큼 이동 */
}

profile
열정, 끈기, 집념의 Frontend Developer

0개의 댓글