목차 (= 2가지 방법)
- position 속성 이용
- 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
