- 정보공유
[퍼블리싱] 이미지 중앙 가운데 정렬
- 작성일
- 18-12-20 16:25
- 조회수
- 31,383 건
- 댓글
- 0 건
<style>
.thumbnail-wrappper { width: 25%; }
.thumbnail { position: relative; padding-top: 100%; /* 1:1 ratio */ overflow: hidden; }
.thumbnail .centered { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); }
.thumbnail .centered img { position: absolute; top: 0; left: 0; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
</style>
<div class="thumbnail-wrapper"> <div class="thumbnail"> <div class="centered"> <img src="xxxx"> </div> </div> </div>