내가 가까운 부모의 위치에 배치 되고 싶으면 자신의 태그에position:absolute속성을 사용하고 그 부모의 태그에 position속성을 사용하면 된다고 알고 있다.
그러던중
width 100% ,height 100%인 부모 안에 자식 박스를 가운데 정렬을 하고 싶어 내가 알고 있던position:absolute를 지정해주고 부모 안에position:relative를 지정해주고 자식 태그 안에top:50%, left:50%속성을 집어 넣었는데 높이 중앙정렬은 얼추 맞다 싶었는데 좌우 중앙 정렬이 이상했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mom{
border: 1px solid #000;
height: 100vh;
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class="mom">
<div class="child">
<img src="./naver.jpg" alt="네이버로고 이미지">
</div>
</div>
</body>
</html>
난 내 눈이 이상한 줄 알았다
이미지에 보더처리를 해보니 뭔가 테두리 좌측면과 상단이 기준으로 정렬이 된 것 처럼 보였다.
구글에 position:absolute 중앙정렬을 검색해보니 바로 궁금증이 해결되었다.
transform:translate속성을 사용해야했다..
요소를 자신의 크기의 절반만큼 왼쪽(-50%)과 위쪽(-50%)으로 이동시켜야 정중앙에 배치가 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mom{
border: 1px solid #000;
height: 100vh;
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50% ,-50%);
}
.child img{
border: 3px dashed orange;
}
</style>
</head>
<body>
<div class="mom">
<div class="child">
<img src="./naver.jpg" alt="네이버로고 이미지">
</div>
</div>
</body>
</html>따라서 child클래스안에 transform속성을 입력해주면
정중앙에 이미지가 배치된다.
생베이스 같은 마음으로 다시 시작