CSS元素垂直居中

CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式，但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。

1.容器里面的内容只有一行文字

<!DOCTY PE  ht ML >
<html>
  <style>
    * {
      padding: 0;
      m arg in: 0;
    }
    div {
      h ei ght: 60px;
      background-color:  # 1888fa;
      color: wh IT e;
    }
    span {
      line-height: 60px;/* 设置一个大的行高，让它等于 理想 的容器高度。
      这样会让容器高度 扩展到 能够容纳行高。如果内容不是 行内元素 ，可以设置为inline-block。 */
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

2.容器自然高度

CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。看下面的例子, 通过设置 padding -t op 和 padding-bottom 相等的值，让内容在父容器垂直居中。

<!DOCTYPE html>
<html>
   <style>
      * {
        padding: 0;
        mar gin : 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>测试</span>
      </div>
    </body>
</html>

3.使用 flexbox

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      dis play : flex;
      align -i tems:  center ;
      justify-content: center;
      background-color: #1888fa;
      color: white;
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

推荐：《2021年CSS面试题汇总（最新）》

以上就是CSS元素垂直居中的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的 CSS元素垂直居中全部内容，希望文章能够帮你解决 CSS元素垂直居中所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于CSS元素垂直居中的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did199583

更新时间：2023-04-27 阅读：20次