CSS banner图回应式垂直居中显示信息的方式

在 PC 网站主页，banner 图做为网页页面中最大的1张照片，在传递网页页面的的关键信息内容的另外，也吸引住着访问者的全部留意力，因此 banner 图的展现方法立即危害着客户的体验，今日大家就来聊聊 banner 图怎样在不一样规格的视口中垂直居中显示信息

大家都了解，根据 background-size: cover; 特性可以将照片垂直居中显示信息，但在对话框拉伸的全过程中，照片常常很伴随着拉伸而变得不忍直视，因此大家能够将照片单独出来，并根据掩藏照片两边的方法，来做到 banner 图在不一样规格下垂直居中显示信息的目地

HTML 构造以下

<div class="banner">
    ![](img/banner.jpg)
</div>

CSS 款式以下

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 ⑶55px;
    vertical-align: middle;
}

当视口宽度与照片宽度同为 1920 px 时，Nian 糕恰好处在主视图垂直居中部位，网页页面实际效果以下图所示

width:1920px

当视口宽度为 1210 px 时，Nian 糕依然在主视图中垂直居中显示信息，以下图所示

width:1210px

本篇的內容到这里就所有完毕了，源代码我早已发到了 GitHubBanner response centered  到了，有必须的同学可自主免费下载

End of File

写作全过程中出現不正确或不当之处的地方在所免不了，期待大伙儿可以给予纠正，以防误导更多人，以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。