img圖片水平和垂直同時居中

image.png
  • 1.在一個div內讓img水平垂直居中顯示,無論img是什么形狀大小。
.img_box{width:3.2rem; height:3.2rem;line-height: 3.2rem; text-align: center; margin:0 auto;}
.img_box img{max-width:100%;max-height: 100%;vertical-align: middle;}
  • 2.banner圖隨著頁面寬度縮小依然水平居中顯示
    思路:給img外框的div設置固定的width,樣式居中顯示。然后img設置最大的width和height,
    margin-left:-(img.width-div.width)/2
<div class="banner-bg">
        <img src="" alt="" class="banner" />
</div>
//css
.banner-bg{position:relative;width:1200px;margin:0 auto;text-align: center;}
img.banner{width: 1920px;height: 370px;margin-left: -360px;}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容