css 基本的垂直居中技巧

最新推荐文章于 2024-06-27 23:07:13 发布

原创最新推荐文章于 2024-06-27 23:07:13 发布 · 253 阅读

CC 4.0 BY-SA版权

本文详细介绍并演示了六种CSS垂直居中布局方法，包括line-height、line-height+inline-block、absolute+margin负值、absolute+translate、absolute+marginauto及Flex+align-items，适合初学者快速掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

对于css的垂直集中，想必困扰着许多初学前端的童鞋，我也不例外。在这儿，我提供几种方法给大家参考参考，希望大家会喜欢。

1 line-height

适用场景：单行文字或某些单行元素垂直居中

 .content{
      width: 400px;
      background: #ccc;
      line-height:100px;
      margin: auto;
      text-align: center;
    }
    <div class="content">enson_chen have a dream</div>

2 line-height + inline-block

适用场景：多对象的垂直居中技巧
既然第一种方式通过line-height可以实现单行元素的垂直居中，我们可以通过inline-block将多个对象包装成单行对象，从而实现元素的垂直居中

.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.content{
  display: inline-block;
  height: auto;
  line-height:1; /*这里加line-height:1是必要的，因为内联元素前有神秘的文本节点，
  会将因为父级的line-height：200px而撑起高度*/
  width: 400px;
  background: #ccc;
}
  <div class="box">
        <div class="content">
            <span>我是第一个span的元素</span>
            <span>我是第二个span的元素</span>
            <span>我是第三个span的元素</span>
        </div>
    </div>

3 absolute + margin 负值

适用场景: 多行元素垂直居中
top:50%,left:50%是根据class="content"的div元素的左上角的点进行定位的，因此需要margin-left，已经margin-top进行精准的调节。

    .box {
        width: 500px;
        height: 250px;
        border: 1px solid #f00;
        margin: auto;
        position: relative;
    }

    .content {
        width: 400px;
        background: #ccc;
        height: 70px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -35px;
    }
  <div class="box">
        <div class="content">
           <span>这是第一个span元素</span>
           <span>这是第二个span元素</span>
           <span>这是第三个span元素</span>
        </div>
  </div>

4 absolute + translate

适用场景: 多行元素垂直居中
当使用了绝对定位时，却不知道定位元素的width+height，那么可以使用absolute+translate或者 absolute+margin auto。
translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。
原理和absolute+margin 负值一样哦

   .box {
        width: 500px;
        height: 250px;
        border: 1px solid #f00;
        margin: auto;
        position: relative;
    }

    .content {
        width: 400px;
        background: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    <div class="box">
        <div class="content">
            <span>这是第一个span元素</span>
            <span>这是第二个span元素</span>
            <span>这是第三个span元素</span>
        </div>
    </div>

5 absolute + margin auto

适用场景: 多行元素垂直居中

 .box {
        width: 500px;
        height: 250px;
        border: 1px solid #f00;
        margin: auto;
        position: relative;
    }

    .content {
        width: 400px;
        background: #ccc;
        height: 70px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
</style>

<body>
    <div class="box">
        <div class="content">
            <span>这是第一个span元素</span>
            <span>这是第二个span元素</span>
            <span>这是第三个span元素</span>
        </div>
    </div>
</body>

6 Flex + align-items

适用场景: 多行元素垂直居中
当元素不能已经设置了position:absolution,用于其他用途中，那么这时候我们可以考虑使用display:flex + align-items:center;

    .box {
        width: 500px;
        height: 250px;
        border: 1px solid #f00;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content {
        width: 400px;
        background: #ccc;
    }
    
    <div class="box">
        <div class="content">
            <span>这是第一个span元素</span>
            <span>这是第二个span元素</span>
            <span>这是第三个span元素</span>
        </div>
    </div>