div에서 가변 너비와 높이를 사용하여 텍스트를 세로로 가운데에 맞추는 세 가지 방법

인터뷰 중 질문을 받았습니다. 너비와 높이가 가변적인 텍스트를 수직으로 가운데에 배치하는 방법은 무엇입니까?

요약하자면:

본문에 구조 작성

main">
< id="login">
djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.

방법 1:

#main{
position: 상대 위치 사용
width : 200px;
높이: 200px;
오버플로: 숨김;
배경색: #ff0;
padding: 10px;
}
#login{
위치: 절대; /*하위 요소에서 절대 위치 지정*/
사용 :50%; /*거리가 상위 요소보다 50% 더 높습니다*/

left:50%;

background-color: #eee ;
-webkit-transform:translate(-50%,-50%); /*CSS3 스타일, :translate(-50%,-50%)는 x축 및 y로부터의 거리의 -50%를 기준으로 합니다. -축 */
}

방법 2:

#main{
너비: 200px;
높이: 200px;
배경색: #eee;
display: table; /* label 요소를 table*/
}
#login{
display: table 형식으로 표시합니다. -cell; /* ie7과 ie6 모두 디스플레이를 인식할 수 없습니다: table-cell;*/
vertical-align: middle;
}

위 내용은 div에서 가변 너비와 높이를 사용하여 텍스트를 세로로 가운데에 맞추는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!