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

1. position 속성 이용
2. flex 속성 이용

position 속성 이용 

※ IE9 이상 (ms 접두어 사용 O), IE10 이상
 

<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 속성 이용

[예제1] - 수평가운데정렬 / 수직가운데정렬

 

<style>

.hz {

    display: flex;    

    justify-content: center;    

    align-items: center;

    height: 100vh;

}
</style>

 

<div class="hz">

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

</div>

 

결과보기

---

[예제2] - 수평우측정렬 / 수직가운데정렬

 

<style>

.box li p {

    background-color: pink;

    display: flex;

    justify-content: flex-end; /* 수평정렬*/

    align-items: center; /* 수직정렬*/

    padding:5px;

}

.box li p b{font-size: 2rem;}

.box li p span{font-size: 1rem; margin-left:10px; display:inline-block; width:40px;}    

</style>

<ul class="box">

     <li>

        <h3>구조</h3>

        <p><b>HTML</b> <span>매우못함</span></p>

     </li>

     <li>

        <h3>디자인</h3>

        <p><b>CSS</b> <span>못함</span></p>

    </li>

</ul>

 

결과보기 

※ IE10 (접두어사용), IE11이상 지원.

관련글: 배르만 님 (230203) https://sir.kr/qa/488922