정렬하고자 하는 내용물의 display가 display:block인 요소와 display:inline-block 요소의 경우이다.
부모요소가 display:inline 의 경우 크기지정이 안되므로 제외
| 부모속성 | 자식속성 | 중앙정렬조건 |
|---|---|---|
| inline-block | inline-block | 부모에 text-align: center; 설정되었을때 |
| inline-block | inline | 부모에 text-align: center; 설정되었을때 |
| block | inline-block | 부모에 text-align: center; 설정되었을때 |
| block | inline | 부모에 text-align: center; 설정되었을때 |
| block | block | 자식에 margin: 0 auto; 설정되었을 때 |
※ 조상중에 position: relative 인 요소를 기준으로 정중앙에 위치한다.
position : absolute;
left : 0; right : 0; margin: 0 auto; // 좌우중앙에 위치
top : 0; bottom : 0; margin: auto 0; // 상하중앙에 위치
left:0; right:0; top:0; bottom:0; margin: auto; // 정중앙에 위치한다.
<div class="row">
<div class="cell">중앙</div>
</div>
.row {
margin: 10px;
border: 3px solid;
display: inline-block;
width: 500px;
height: 300px;
position: relative;
}
.cell {
width : 100px;
line-height : 80px;
text-align : center;
border : 3px solid blue;
border-radius : 10px;
background : #FFFF00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<style>
.row {
margin: 10px;
border: 3px solid;
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.cell {
width : 100px;
line-height : 80px;
text-align : center;
border : 3px solid blue;
border-radius : 10px;
background : #FFFF00;
}
</style>
<div class="row">
<div class="cell">중앙</div>
</div>