實現垂直居中的五種方法

qylost 發布于2019-08-30 15:44 / 386人閱讀

摘要：實現垂直居中的幾種方法分場景介紹包裹行內元素效果圖包裹行內塊級元素效果圖結構效果圖注容器若設置了再設置的無效，即會自動填滿的高寬若未設置，則自適應的實際寬高

實現垂直居中的幾種方法（分場景介紹）

line-height （包裹行內元素）


    123456788


    12345555


.wrap {
   height: 100px;
   line-height: 100px;
}

效果圖

vertical-align: middle （包裹行內塊級元素）

  
      
      
  
  
  .wrap {
       height: 100px;
       border: 1px solid #000;
       margin-bottom: 10px;
   }
   .child {
       border: 1px solid red;
       height: 50px;
       width: 200px;
   }

   .wrap::after, .child {
       display: inline-block;
       vertical-align: middle;
   }
   .wrap::after {
       content: "";
       height: 100%;
   }

效果圖

flex結構 align-items

   
       block
       inline-block
       inline
   
   .wrap {
       display: flex;
       align-items: center;
       height: 100px;
       border: 1px solid #000;
       margin-bottom: 10px;
   }
   .child {
       border: 1px solid red;
       height: 50px;
       width: 200px;
   }
   .inline-block {
       display: inline-block;
       height: 30px;
   }

效果圖

position + transform


    block

.wrap {
    position: relative;
}
.child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

table table-ceil

    table-ceil
    block

.wrap { display: table; } .child { display: table-cell; width: 500px; vertical-align: middle; }

注：容器height/width 若wrap 設置了height/width, 再設置child的height/width無效，即 child會自動填滿wrap的高寬；若wrap 未設置height/width，則wrap自適應child的實際寬高

云服務器 GPU云服務器實現垂直居中下的五種負載均衡的五種策略垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116116.html

CSS進階篇--div中的內容垂直居中的五種方法

摘要：二內邊距法另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用將內容垂直居中，比如這段代碼的效果和法差不多。一、行高（line-height）法如果要垂直居中的只有一行或幾個文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hi...

fjcgreat 2019-08-28 18:17 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
CSS之div嵌套問題及高度自適應問題的五種實現--個人總結

摘要：以下是在自己實習生面試的時候遇到的一個問題，事后自己也去總結了一下。以下是在自己實習生面試的時候遇到的一個問題，事后自己也去總結了一下。問題描述如下：一個外層div里面嵌套兩個內部div，外層div高度固定（假設未知），內層上面的div高度固定，如何讓下面的div實現撐滿外層的div高度？看到過網上有類似的問題，但是大部分都是假設外層高度為100%或者是已知的，而我遇到的是外層高度雖...

Jaden 2019-08-30 15:53 評論0 收藏0
html的幾種水平垂直居中的方式（基礎）

摘要：前言我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結式的列出幾種常用的水平垂直居中的方法。前言我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結式的列出幾種常用的水平垂直居中的方法。第一種方法 d第一種 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 評論0 收藏0