프론트엔드/CSS
[CSS] transform - Translate 수평, 수직 정렬
jinwanseo
2021. 3. 4. 21:18
728x90
CSS 수평 수직 정렬 Transform - translate

CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다.
가운데 정렬할수 있는 방법에는 다양한 방법이 있지만,
transform 속성 또한 상당히 많이 사용이 되고 있다.
CSS Selector {
transform : translate(좌우, 상하);
}
샘플예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Translate</title>
<style>
.container {
width : 400px;
height: 400px;
background : orange;
}
.container > .box {
width : 200px;
height: 200px;
background : royalblue;
}
</style>
</head>
<body>
<section class="container">
<div class="box"></div>
</section>
</body>
</html>
출력 결과

코드 수정
.container > .box {
width : 200px;
height: 200px;
background : royalblue;
/*하단의 코드 추가*/
transform : translate(100%,100%);
}
출력 결과

728x90