成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

YuboonaZhang / 2742人閱讀

摘要：內(nèi)容無法撐開父級(jí)容器表格容器居中使用場景容器內(nèi)容居中，并不想脫離文檔流。缺點(diǎn)不適用于彈層這種蓋住頁面內(nèi)容的布局使用和垂直居中值等于元素高度的值使用場景一個(gè)容器內(nèi)部的當(dāng)韓文字居中優(yōu)點(diǎn)內(nèi)容寬高，容器寬高均不用。

以前前端面試基礎(chǔ)問題的時(shí)候經(jīng)常會(huì)被問到這個(gè)問題：
但是從來沒有做過這樣的總結(jié)，網(wǎng)上很多人總結(jié)的很多，很好。自己干了這么多年，這個(gè)問題使用場景還是蠻多的，還是自己總結(jié)一下吧（不斷更新）

1。絕對(duì)定位居中

        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, 布局內(nèi)容提示單行提示文字
優(yōu)點(diǎn)：1.適用場景多。2.不用care了父級(jí)元素的大小。3.兼容ie6-7
缺點(diǎn)：1.子元素的寬高需固定。2.內(nèi)容無法撐開父級(jí)容器

2.transform絕對(duì)定位

  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彈層,彈層的寬高均不固定
優(yōu)點(diǎn)：1.適用場景多。2.內(nèi)容寬高，容器寬高均不用care
缺點(diǎn)：1.不兼容IE9以下。2.內(nèi)容無法撐開父級(jí)容器

3.margin+絕對(duì)定位

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

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

4.表格容器居中

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

使用場景：容器內(nèi)容居中，并不想脫離文檔流。（具體場景想不起來啦）
優(yōu)點(diǎn)：1.內(nèi)容溢出會(huì)將父元素?fù)伍_。2.內(nèi)容寬高，容器寬高均不用care。3兼容IE9以下。
缺點(diǎn)：1.不適用于Modal彈層這種蓋住頁面內(nèi)容的布局

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

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

使用場景：一個(gè)容器內(nèi)部的當(dāng)韓文字居中
優(yōu)點(diǎn)：1.內(nèi)容寬高，容器寬高均不用care。 2. 兼容性好
缺點(diǎn)：1.內(nèi)容必須是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的移動(dòng)端H5開發(fā)
優(yōu)點(diǎn)：1.內(nèi)容寬高，容器寬高均不用care。
缺點(diǎn)：1.不兼容IE10以下的瀏覽器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51523.html

相關(guān)文章

  • 水平、垂直居中方式總結(jié)

    摘要：我們?cè)趯?shí)際工作中經(jīng)常會(huì)遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設(shè)置水平居中和垂直居中。水平居中行內(nèi)元素。不定寬塊狀元素水平居中我們來學(xué)習(xí)一下這種方法。 我們?cè)趯?shí)際工作中經(jīng)常會(huì)遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設(shè)置水平居中和垂直居中。 水平居中 行內(nèi)元素。 如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過給父元素設(shè)置text-align:c...

    陸斌 評(píng)論0 收藏0

  • 垂直水平居中的方式總結(jié) +（使用場景）

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

    snifes 評(píng)論0 收藏0

  • css對(duì)齊方案總結(jié)

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

    marek 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<