css3 수직 거중의 몇 가지 방법
5605 단어 학습 노트
<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;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
STL 학습노트(6) 함수 객체모방 함수는 모두pass-by-value이다 함수 대상은 값에 따라 전달되고 값에 따라 되돌아오기 때문에 함수 대상은 가능한 한 작아야 한다(대상 복사 비용이 크다) 함수 f와 대상 x, x 대상에서 f를 호출하면:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.