本篇文章主要介紹了CSS banner圖響應式居中顯示的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
在PC 網站首頁，banner 圖作為網頁中最大的一張圖片，在傳達網頁的的主要信息的同時，也吸引著瀏覽者的所有註意力，所以banner 圖的展示方式直接影響使用者的體驗，今天我們就來聊聊banner 圖如何在不同尺寸的視口中居中顯示
我們都知道，透過background-size: cover; 屬性能夠將圖片居中顯示，但在視窗拉伸的過程中，圖片往往很隨著拉伸而變得慘不忍睹，所以我們可以將圖片獨立出來，並通過隱藏圖片兩側的方式，來達到banner 圖表在不同尺寸下居中顯示的目的
HTML 結構如下
<p class="banner">
</p>CSS 樣式如下
body {
overflow-x: hidden;
}
.banner {
width: 1210px;
margin: 0 auto;
}
.banner img {
width: 1920px;
margin: 0 -355px;
vertical-align: middle;
}width:1920px
當視口寬度為1210 px 時，Nian 糕依舊在視圖中居中顯示，如下圖所示
#width: 1210px本篇的內容到這裡就全部結束了，源碼我已經發到了GitHubBanner response centered 上了，有需要的同學可自行下載
行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人。
####CSS中如何使用負margin值來調整居中位置# ##############CSS實作文字環繞圖片的效果######################
以上是關於CSS banner圖響應式居中顯示的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
