프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] CSS 세로 가로 가운데 정렬

2022.05.24
북마크 작성자 정보
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>

 

이 포스트 공유하기

전체목록