반응형CSS transform을 이용한 가운데 정렬

Youje0·2022년 12월 5일
0

transform을 활용한 가운데 정렬

<!-- HTML -->
<div>
	<p>가운데 정렬</p>
</div>
<!-- CSS -->
div{
position: relative;/* 부모요소에 relative */
width: 180px;height: 180px;border: 1px solid #dcdcdc
}

p {
position: absolute;left: 50%;top: 50%;
transform: translate(-50%,-50%) /* 자식요소에 translate 값 주기*/
}
profile
ㅠㅠ

0개의 댓글