• Q&A
  • 수강신청
  • 회원가입
  • 로그인

[css] CSS - 블럭요소 수직중앙정렬/수평중앙정렬 (= 가로가운데정렬) (IE9) ★★★★★ (HT - Center Vertically)

position 속성 이용

 

ms 접두어 사용 X : IE10 이상
ms 접두어 사용 O : IE 9 이상

 

<style>

.hz { 

    height:100px;

    position: relative;

    border: 3px solid red; 

}


.hz p {

    margin: 0;

    position: absolute;

    top: 50%;

    left: 50%;

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

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

}

</style>


<div class="hz">

  <p>홈짱닷컴 Homzzang.com</p>

</div>


결과 보기

 

 

flex 속성 이용

 

IE10 (접두어사용), IE11이상 

 

<style>

.hz {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

}
</style>

 

<div class="hz">

  <p>홈짱닷컴 Homzzang.com</p>

</div>

 

결과보기



자동로그인
Since 2012