CSS元素垂直居中-css教學-PHP中文網

CSS元素垂直居中

autoload

發布： 2021-04-15 13:59:41

原創

1704 人瀏覽過

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元素垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！