将元素定位到当前行的上一行，并居中

第一步banner中定义好了高度为382px的全屏图片：banner-img（此处省略）
第二步 创建一个小盒子，用于盛放居中的内容

• 注意这个元素是banner的子元素，必须放到banner中，与banner-img是兄弟元素

<div class="container banner-center">

</div>

• container已经设置了固定的宽度1000px

.container{
            width: 1000px;
            margin: 0 auto;
        }

• 父级banner有固定的高度
• 使用相对于父级banner的绝对定位：先给父级banner添加一个position属性

.banner{
            width: 100%;
            overflow: hidden;
            height: 382px;
            position: relative;
        }

• 固定的高度：与父级banner的高度一致，100%的高度
• 然后给自己添加绝对定位的属性：定位到父级的左侧50%的位置，顶部0；这三个属性缺一不可。
• 设置向左侧的偏移量，偏移值为自身宽度（1000px）的一半，1000*0.5 = 500px
• 为方便查看效果，我们添加一个黑色背景。

.banner-center{
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -500px;
            background-color: #000000;
        }

代码解释：
我们需要banner-center居中，效果就是banner-center的中线与banner的中线重合。
第一步使用绝对定位，让banner-center的左边缘与banner的中线对齐，left：50% ；
第二步，让banner-center向左方偏移自身宽度的一半，让自己的中线与banner的中线正好重合。