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

資訊專欄INFORMATION COLUMN

【HTML/CSS】CSS實(shí)現(xiàn)垂直水平居中

CNZPH / 794人閱讀

摘要：相信在工作中經(jīng)常會遇到需要某某元素垂直水平居中的需求，下面總結(jié)一下實(shí)現(xiàn)方法元素已知寬度絕對定位反向偏移元素未知寬度絕對定位流體特性當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性就發(fā)生了。

相信在工作中經(jīng)常會遇到需要某某元素垂直水平居中的需求，下面總結(jié)一下實(shí)現(xiàn)方法
元素已知寬度 
絕對定位 + margin反向偏移

html

   
   
   
     
     
     Sumon Test

元素未知寬度 
絕對定位 + margin auto + 流體特性

html

   
   
   
     
     
     Sumon Test

Tips

   當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性就發(fā)生了。
   具有流體特性絕對定位元素的margin:auto的填充規(guī)則和普通流體元素一模一樣：
   1.如果一側(cè)定值，一側(cè)auto，auto為剩余空間大??；
   2.如果兩側(cè)均是auto, 則平分剩余空間；


絕對定位 + transform反向偏移

html

   
   
   
     
     
     Sumon Test
     

       

       

     

   
   
   
   
   


flex布局

html

   
   
   
     
     
     Sumon Test

Tips

   1.justify-content 設(shè)置水平方向的元素位置
   2.align-items 設(shè)置垂直方向的元素位置
   

table-cell布局

html

   
   
   
     
     
     Sumon Test

Tips

  1.vertical-align 設(shè)置元素的垂直對齊方式
  2.text-align 設(shè)置元素中的文本的水平對齊方式


以上就是我對CSS實(shí)現(xiàn)垂直水平居中的總結(jié)，如有異議歡迎評論留言。

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

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

相關(guān)文章

  • 【HTML/CSS】CSS實(shí)現(xiàn)垂直水平居中

    摘要：相信在工作中經(jīng)常會遇到需要某某元素垂直水平居中的需求，下面總結(jié)一下實(shí)現(xiàn)方法元素已知寬度絕對定位反向偏移元素未知寬度絕對定位流體特性當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性就發(fā)生了。 相信在工作中經(jīng)常會遇到需要某某元素垂直水平居中的需求，下面總結(jié)一下實(shí)現(xiàn)方法 元素已知寬度 絕對定位 + margin反向偏移 html ...

    linkFly 評論0 收藏0

  • 【CSS】水平垂直居中的4種實(shí)現(xiàn)（寬高不定）

    摘要：水平垂直居中的種方案寬高不定方案中我也給了寬高但并不是說寬高固定了。下面四種方案都是能夠?qū)崿F(xiàn)當(dāng)父元素或子元素的寬高發(fā)生改變時依舊維持水平垂直居中布局的方案。 水平垂直居中的4種方案(寬高不定) 方案中我也給了寬高,但并不是說寬高固定了。而是以為不給寬高無法看到效果。這個方案不固定寬高的是指,用這個方案之后,如果你父元素、子元素的寬高發(fā)生了改變,依舊可以保證是水平垂直居中的位置。 下面四...

    cppowboy 評論0 收藏0

  • CSS水平或垂直居中技巧

    摘要：適用情景單對象水平居中原理將子元素設(shè)置塊級表格，再設(shè)置水平居中。結(jié)語有些是水平居中，有些是垂直居中，將它們某兩個合在一起就能實(shí)現(xiàn)水平和垂直均居中。 前言 css水平和垂直居中是一個亙古不變的話題，它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當(dāng)中。說來慚愧，在兩年前面試的時候，我完全不知道如何做到水平和垂直均居中的方法，那場面別提有多尷尬了（ps：特想找個地洞鉆進(jìn)去）。。。時隔兩年，對于這個...

    CastlePeaK 評論0 收藏0

  • CSS那些事兒——居中布局

    摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現(xiàn)今自己了解的居中布局方法作個小總結(jié)。水平居中行內(nèi)元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點(diǎn)進(jìn)行實(shí)現(xiàn)。 前言 居中布局，是前端頁面最常見的一種布局需求。剛開始學(xué)習(xí)前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現(xiàn)今自己了解的居...

    JeOam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<