现在很多网站都有全屏的横幅图片，这使得它们看起来非常令人印象深刻，这种横幅通常形成一个大图片，然后以不同的分辨率显示图片的中间部分，那么CSS banner居中显示的方法有哪些？爱站技术频道小编告诉你！
HTML 结构如下
CSS 样式如下
<pre class="brush:css;”>
body {
overflow-x: hidden;
}
.banner {
width: 1210px;
margin: 0 auto;
}
.banner img {
width: 1920px;
margin: 0 -355px;
vertical-align: middle;
}
body {
overflow-x: hidden;
}
.banner {
width: 1210px;
margin: 0 auto;
}
.banner img {
width: 1920px;
margin: 0 -355px;
vertical-align: middle;
}
当视口宽度与图片宽度同为 1920 px 时，Nian 糕正好处于视图居中位置，页面效果如下图所示
width:1920px
当视口宽度为 1210 px 时，Nian 糕依旧在视图中居中显示，如下图所示
width:1210px
以上就是CSS banner居中显示的方法有哪些的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱站技术频道。