可以自己调试水平与垂直

html代码

使 nbanner_nr 水平垂直居中

<div class="nbanner">
    <img src="images/banner-about.jpg">
    <div class="nbanner_nr">
        <h2>走进XXXXX</h2>
        <p>ADVANTAGE</p>
    </div>
</div>

css代码

.nbanner{position:relative}/*这一行*/
.nbanner::before{position: absolute;z-index:9;top: 0;left: 0;width: 100%;height: 100%;content: "";background-color:rgba(0,0,0,0.7);opacity:1;}
.nbanner_nr{position: absolute;z-index:9;color:#fff;text-align:center;top:50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);left:50%}/*与这一行*/