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

最新推荐文章于 2022-04-09 09:30:00 发布

原创最新推荐文章于 2022-04-09 09:30:00 发布 · 762 阅读

0 ·

CC 4.0 BY-SA版权

学习教程专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用CSS实现内容居中的方法。首先定义了全屏图片的高度，并创建了一个用于放置居中内容的小盒子。通过绝对定位和偏移量设置，使该盒子水平垂直居中于父元素中。

第一步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的中线正好重合。