CSS_Experience exchange를 사용하여 이미지를 수직으로 가운데 맞추는 팁

질문의 어려움은 두 가지 점에 있습니다.

세로 중앙;
사진은 몇 가지 특별한 특성을 지닌 교체 요소입니다.​
이 문제를 해결하는 방법에 관해서는 상대적으로 깨끗하고 간단한 CSS 솔루션을 절충합니다.

.box {
/*IE 이외의 주류 브라우저에서도 인정되는 수직 센터링 방식*/
디스플레이: 테이블-셀;
수직 정렬:가운데;

/*가로 중심 설정*/
텍스트 정렬:가운데;

/* IE 해킹 */
*디스플레이: 블록;
*font-size: 175px;/*는 높이의 약 0.873, 200*0.873은 약 175입니다*/
*font-family:Arial;/*gbk 인코딩과 같은 non-utf-8로 인한 해킹 실패 문제 방지*/

너비:200px;
높이:200px;
테두리: 1px 실선 #eee;
}
.box img {
/*이미지를 수직 중앙에 맞추도록 설정*/
수직 정렬:가운데;
}

물론 다른 해결 방법도 있지만 여기서는 다루지 않겠습니다.