css 水平 垂直居中方案

水平居中方案

  1. 行內元素的水平居中

    • 對父元素設置 text-align: center;

      <div class="parent">
          <span class="child">我是行內元素 在父元素內水平居中</span>
      </div>
      
      <style>
          .parent {
              text-align:center;
          }
      </style>
      
  2. 定寬塊狀元素的水平居中方案

    <div class="parent">
      <div class="child" style="width: 100px;">
        另一種方法是使用table標簽 讓其表現為inline-block
      </div>
    </div>
    
    • 對定寬子元素設置 .child: {margin: 0 auto; }

    • 絕對定位和負邊距

      .parent {
        background: yellow;
        height: 200px;
        position: relative;
      }
      
      .child {
        width: 100px;
        background: red;
        /*這個是最簡單的*/
        /* margin: 0 auto; */
        
        position: absolute;
        left: 50%;
        margin-left: -100px; /*是根據自身的寬度width: 200px*50% 計算得來*/
        /*更好的方案是使用 transform: translateX(-100px)*/
      }
      
      定寬水平居中
  3. 不定寬塊狀元素的水平居中方案

    • 對齊添加table標簽, tbody, tr, td同樣添加上, 然后將table看成定寬元素設置margin: 0 auto;
      對于定寬塊狀也可以使用這種方案
      缺點: 增加多余的標簽, 不夠語義化;

      <div class="parent">
          <table class="table-center">
              <tbody>
                  <tr>
                      <td>
                          <div class="child">table居中方案</div>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
      
      <style>
          .parent {
              background: yellow;
          }
          .table-center {
              margin: 0 auto;
          }
      </style>
      
      table水平居中
    • 父元素浮動相對定位(寬度由子元素撐起),子元素相對自身向左移動50%的寬度距離

      <style>
      .container {
          background: dodgerblue;
          overflow: hidden;
          height: 200px;
      }
      .parent {
          float: left;
          position: relative;
          left: 50%;
      }
      .child {
          position: relative;
          left: -50%;
          background: red;
      }
      </style>
      
      定寬浮動定位

垂直居中方案

  1. 行內元素的垂直居中

    • line-height針對單行元素居中方案 使line-height = height

      <div class="container" style="height: 200px;">
        <span class="child" style="line-height: 200px;">
          單行行內元素的垂直居中
        </span>
      </div>
      
    • 針對多行的display:table-cell方案

      <style>
      .container {
        height: 200px;
        background-color: dodgerblue;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        /* margin-left: 20px; */
      }
      
      .child {
        /* line-height: 200px; */ /*單行情況下只設置行高等于高度 可以滿足垂直居中*/
      }
      </style>
      
      <div class="container">
        <span class="child">
          多行行內元素的垂直居中 <br>
          多行行內元素的垂直居中 <br>
          多行行內元素的垂直居中 <br>
          多行行內元素的垂直居中 <br>
          多行行內元素的垂直居中 <br>
          多行行內元素的垂直居中 <br>
        </span>
      </div>
      
      <div class="description" style="margin-top: 30px">
        <p>1. 使用了display:table-cell后margin不起作用 
        </p><p>2. 但值得注意的是:table-cell會被其他一些css屬性破壞,比如float和position:absolute等等。
      </p></div>
      
  2. 塊狀元素的垂直居中方案

    • line-height=height方案 (針對單行元素)

    • display:table-cell 和行內元素類似 (多行和單行)

    • 定高父元素和定高子元素的垂直居中

      <div class="parent">
        <div class="child">child元素定高</div>
      </div>
      
      <style>
      .parent {
        height: 300px;
        background: yellow;
        margin: 0 auto;
        position: relative;
      }
      
      .child {
        position: absolute;
        border: 1px solid red;
        height: 100px;
        
        /*垂直居中  對于父元素和當前元素的高度已知的情況下*/
        top: 50%;
        margin-top: -50px;
        
        /*水平居中*/
        left: 50%;
        /* margin-left: -100px;  開啟CPU渲染*/
        transform: translateX(-100px);
      }
      </style>
      
      父元素和子元素定高
    • flex實現(見下方)

同時水平居中和垂直居中

  1. flex方案

    .parent {
      height: 300px;
      background: dodgerblue;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .child {
      width: 500px;
      background: #aaa;
      text-align: center;
    }
    
    flex水平垂直居中
  2. 子元素和父元素定寬定高下的方案

    .parent {
      /* width: 500px; */
      height: 300px;
      background: yellow;
      margin: 0 auto;
      position: relative;
    }
    
    .child {
      position: absolute;
      border: 1px solid red;
      height: 100px;
      width: 200px;
      
      /*垂直居中  對于父元素和當前元素的高度已知的情況下*/
      top: 50%;
      margin-top: -50px;
      
      /*水平居中*/
      left: 50%;
      /* margin-left: -100px;  開啟CPU渲染*/
      transform: translateX(-100px);
    }
    
    絕對定位和負邊距
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 一 外部式css樣式 (也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css...
    KunMitnic閱讀 960評論 0 1
  • 各種純css圖標 CSS3可以實現很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,660評論 0 8
  • 2017.06.23 星期五 中雨緊張焦慮的一天 在極度緊張中迎來了第一天的培訓,培訓內容多,實戰要求也又...
    圓圓_22b4閱讀 202評論 0 1
  • 八月的天空 作者〡云飄飄 誦讀〡逸風輕塵 編輯〡嶺南布衣 出品〡大象無形 八月的天空很高,很遠 云亦格外的浪漫 我...
    易阿方閱讀 317評論 0 0