• 技术文章 >web前端 >css教程

    CSS元素垂直居中

    逆旅行人逆旅行人2021-04-06 16:04:03原创55

    2021040615512486958.jpg

    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-toppadding-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元素垂直居中的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:CSS 垂直居中
    上一篇:css中skew是什么意思 下一篇:用css3实现一个奥运五环
    第15期线上培训班

    相关文章推荐

    • 为什么css要初始化• css有几种定位• 如何使用内嵌式引入css样式表• css怎么设置元素高度为20px• css有超文本标记选择器吗• css图片如何设置上边框距离• css中skew是什么意思

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网