CSS元素垂直居中

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

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

!DOCTYPE htML>
    html>
      style>
    * {
          padding: 0;
          margin: 0;
    }
    div {
          height: 60px;
          background-color: #1888fa;
          color: whITe;
    }
    span {
          line-height: 60px;
/* 设置一个大的行高，让它等于理想的容器高度。      这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */    }
      /style>
      body>
        div>
          span>
    测试/span>
        /div>
      /body>
    /html>
    

2.容器自然高度

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

!DOCTYPE html>
    html>
       style>
      * {
            padding: 0;
            margin: 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;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #1888fa;
          color: white;
    }
      /style>
      body>
        div>
          span>
    测试/span>
        /div>
      /body>
    /html>
    

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！