垂直水平居中的方式總結 +（使用場景）

YuboonaZhang 發布于2019-08-01 18:01 / 2738人閱讀

摘要：內容無法撐開父級容器表格容器居中使用場景容器內容居中，并不想脫離文檔流。缺點不適用于彈層這種蓋住頁面內容的布局使用和垂直居中值等于元素高度的值使用場景一個容器內部的當韓文字居中優點內容寬高，容器寬高均不用。

以前前端面試基礎問題的時候經常會被問到這個問題：
但是從來沒有做過這樣的總結，網上很多人總結的很多，很好。自己干了這么多年，這個問題使用場景還是蠻多的，還是自己總結一下吧（不斷更新）

1。絕對定位居中

        width: 100px;  
        height: 100px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -60px; /* (width + padding)/2 */  
        margin-top: -60px; /* (height + padding)/2 */

使用場景：Modal彈層, Toast, 布局內容提示單行提示文字
優點：1.適用場景多。2.不用care了父級元素的大小。3.兼容ie6-7
缺點：1.子元素的寬高需固定。2.內容無法撐開父級容器

2.transform絕對定位

  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);

使用場景：不用兼容IE9以下的Modal彈層,彈層的寬高均不固定
優點：1.適用場景多。2.內容寬高，容器寬高均不用care
缺點：1.不兼容IE9以下。2.內容無法撐開父級容器

3.margin+絕對定位

    margin: auto;  
    position: absolute;  
    top: 0; left: 0; bottom: 0; right: 0;

使用場景：Modal彈層, Toast, 布局內容提示單行提示文字
優點：1.適用場景多。2.內容寬高，容器寬高均不用care。3.兼容性好
缺點：1.父級容器必須聲明高度。2.內容無法撐開父級容器

4.表格容器居中

  display: table-cell;  
  vertical-align: middle;
  text-align: center;

使用場景：容器內容居中，并不想脫離文檔流。（具體場景想不起來啦）
優點：1.內容溢出會將父元素撐開。2.內容寬高，容器寬高均不用care。3兼容IE9以下。
缺點：1.不適用于Modal彈層這種蓋住頁面內容的布局

5.使用line-height和text-align垂直居中

    text-align: center;
    height: 100px; 
    line-height: 100px;/*值等于元素高度的值*/

使用場景：一個容器內部的當韓文字居中
優點：1.內容寬高，容器寬高均不用care。 2. 兼容性好
缺點：1.內容必須是inline或者inline-block的單行文本，不支持多行文本。

6.Flex布局

   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older             WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

使用場景：微信小程序和一些不需要兼容IE的移動端H5開發
優點：1.內容寬高，容器寬高均不用care。
缺點：1.不兼容IE10以下的瀏覽器

云服務器 GPU云服務器 redis的使用場景消息隊列的使用場景負載均衡的場景云計算的應用場景

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

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

水平、垂直居中方式總結

摘要：我們在實際工作中經常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設置水平居中和垂直居中。水平居中行內元素。不定寬塊狀元素水平居中我們來學習一下這種方法。我們在實際工作中經常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設置水平居中和垂直居中。水平居中行內元素。如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置text-align:c...

陸斌 2019-08-30 12:49 評論0 收藏0
垂直水平居中的方式總結 +（使用場景）

摘要：內容無法撐開父級容器表格容器居中使用場景容器內容居中，并不想脫離文檔流。缺點不適用于彈層這種蓋住頁面內容的布局使用和垂直居中值等于元素高度的值使用場景一個容器內部的當韓文字居中優點內容寬高，容器寬高均不用。以前前端面試基礎問題的時候經常會被問到這個問題：但是從來沒有做過這樣的總結，網上很多人總結的很多，很好。自己干了這么多年，這個問題使用場景還是蠻多的，還是自己總結一下吧（不斷更新）...

snifes 2019-08-29 13:49 評論0 收藏0
css對齊方案總結

摘要：核心代碼利用布局利用布局，其中用于設置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項在容器的當前行的側軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對齊方案總結垂直居中通用布局方式(內斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 評論0 收藏0