css3 수직 거중의 몇 가지 방법

5605 단어 학습 노트
새로 배운 몇 가지 css3 수직 가운데를 차지하는 방법을 기록하고 몇 가지 예를 써서 설명한다.

<div class=container>
   <p>            ^^p>
div>

방법1:
.container{
width:500px;
height:500px;
border:1px solid pink;/*         */
position:relative;
}
p{
margin:0;
position:absolute;
top:50%;
left:50%
transform:translate(-50%,-50%);
border:1px solid pink;
}

방법2:
.container{
height:500px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid pink;
}
p{
margin:0;
}

방법 3:
/*                    */
.container{
width:500px;
height:500px;
border:1px solid pink;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
p{
margin:0;
}

메서드 4:
/*     */
.container{
width:500px;
height:500px;
display:table-cell;
vertical-align:middle;
border:1px solid pink;
}
p{
margin:0;
}

좋은 웹페이지 즐겨찾기