북마크 작성자 정보
작성일/수정일
2014-08-11 11:30:10 / 2022-05-24 11:30:10
1 . absolute 속성을 이용
부모 position: relative; l
자식 position: absolute; left:50%; top:50; trnasform:translate(-50%, -50%);
absolute속성을 이용하여 top속성에 50%를 주고 영역만큼 transform:translate(-50%,-50%) 제외시킴.
그럼으로써 높이를 고정시킬 수 있다.
https://relation.co.kr/images_board/board_system_publishing/128/index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR?PAR_NO=5&NO=128</title>
<style>
.wrap { position:relative; width:100vw; height:100vh; }
.wrap .cell { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100px; height:100px; background:red; }
</style>
</head>
<body>
<div class="wrap">
<div class="cell">relation.co.kr</div>
</div>
</body>
</html>
2. flex
flex의 속성을 이용하여 센터 정렬
https://relation.co.kr/images_board/board_system_publishing/128/index1.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR?PAR_NO=5&NO=128_1</title>
<style>
.wrap { display:flex; justify-content:center; align-items:center; width:100vw; height:100vh; }
.wrap .cell { width:100px; height:100px; background:red; }
</style>
</head>
<body>
<div class="wrap">
<div class="cell">relation.co.kr</div>
</div>
</body>
</html>