개발나라 스용공주

[HTML/CSS] position 속성 사용 시 요소 중앙정렬하기 - transform과 translate 본문

WEB/HTML & CSS

[HTML/CSS] position 속성 사용 시 요소 중앙정렬하기 - transform과 translate

스용공주 2024. 11. 1. 06:07
728x90
728x90

이번 글은 position을 통해 중앙정렬하는 방법에 대한 글이다.

 

아래 코드를 보면 position에 부모 부분에 relative와 자식 부분에 absolute를 알맞게 주고 top과 left를 통해 50%로 중앙에 놓일 수 있도록 해준 것을 확인할 수 있다.

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <div class="green">
        <div class="yellow"></div>
    </div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

.green {
    width: 500px;
    height: 300px;
    background-color: green;
    position: relative;
}

.yellow {
    width: 200px;
    height: 200px;
    background-color: gold;
    position: absolute;
    top:50%;
    left: 50%
}

 

하지만 결과를 보면 아래 사진과 같이 중앙정렬이 되지 않는 것을 확인할 수 있다.

이것은 자식 요소인 노란 border의 크기값이 위치에 반영되었기 때문이다.

 

 

아래 코드를 작성해주게되면 반영된 border의 크기값을 제외하게된다.

transform: translate(-50%,-50%);

실행결과

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] css함수 - calc 퀄크  (0) 2024.11.01
[HTML/CSS] position 특징  (0) 2024.11.01
[HTML/CSS] 순서를 만드는 가상클래스 nth-child(), nth-of-type()  (0) 2024.10.26
[HTML/CSS] 애니메이션이 들어간 버튼 만들기 - 가상클래스 hover와 transition  (0) 2024.10.26
[HTML/CSS] float 속성의 이론 상세 설명 - inline, block, overflow, clear  (0) 2024.10.23
'WEB/HTML & CSS' Related Articles more
Comments