国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 垂直居中方法匯總

CarterLi / 2933人閱讀

摘要：優(yōu)點寫法簡單，適應(yīng)性好缺點兼容性一般，不支持瀏覽器小節(jié)以上共有種方式來實現(xiàn)垂直居中的效果，個人是最青睞第種方式的，兼容性好，適應(yīng)性好，各位小伙伴還有沒有其他的實現(xiàn)方式呢

查看原文可以有更好的排版效果哦

前言

居中是平時工作中的最常見的一種需求，各種圖片居中或者各種彈窗，水平居中還好，特別是垂直居中，很多初學者表示太難寫了，現(xiàn)在列舉一些常用的方法。

實戰(zhàn)

這里只講述css相關(guān)的方法，js暫時不提，畢竟這是樣式上的事情，就不勞煩js出手了。

1. top 50% ;margin-top:-自身高度/2

記得最早工作的時候?qū)W到的第一個方法就是，top給50%，然后把自身向上移動自身高度的一半，具體實現(xiàn)是

這樣就很容易實現(xiàn)了垂直居中，但這種必須要知道自身的高度，才能使用margin-top:-100px這種來達到目的。

優(yōu)點: 寫法簡單，兼容性好

缺點: 必須知道目標元素的高度，而且高度必須是固定的值，否則樣式要跟著相應(yīng)的改動，不夠靈活

2. top 50% ; transforms:translateY(-50%)

這個方法和上述原理一致，只不過向上位移換成了transforms:translateY寫法

.box{
  positon:absolute; 
  width:200px; 
  height:200px; 
  background:orange; 
  top:50%; 
  transforms:translateY(-50%) 
}

由于用到了css3的新特性，所以對瀏覽器的要求就比較高了

優(yōu)點: 寫法簡單，適應(yīng)性好

缺點: 兼容性一般，不支持ie8瀏覽器

3. margin:auto

大家平時可能都用過margin:0 auto來實現(xiàn)一個div水平居中吧，其實也是可以做垂直居中的。

.box{
  positon:absolute; 
  width:200px; 
  height:200px; /**必須要指明寬高**/
  background:orange; 
  top:0;
  bottom:0; 
  margin:auto
}

是不是很神奇？但是有個地方要注意的是，這個必須要指明寬高，不然的話top:0;bottom:0就把容器撐滿了。

優(yōu)點: 寫法簡單，適應(yīng)性好，兼容性好

缺點: 需要指明元素寬高，如果目標元素寬高是變化的，你可以通過js來輔助生成

4. vertical-align:middle

這個方法是我最喜歡用的一個方法，基本滿足上述的全部要求，主要用到了多個元素vertical-align:middle實現(xiàn)垂直居中，由于需要多個元素才能生效（不然一個元素跟誰對齊呢），所以再添加一個i標簽

這樣就實現(xiàn)垂直居中，而且不需要關(guān)注目標元素的尺寸，適應(yīng)性強

通常我在用的時候用用一個偽元素來代替，避免在html中新增結(jié)構(gòu)

這樣在需要垂直居中的父級上添加一個.mfix就可以實現(xiàn)垂直居中了。

優(yōu)點: 適應(yīng)性好，兼容性好

缺點: 可能稍微有點復(fù)雜吧。

5. writing-mode

這個方法是在張鑫旭的博客中發(fā)現(xiàn)的，也挺有意思。

正常情況下比如text-align:center，inline-block元素可以實現(xiàn)水平居中，假設(shè)我們通過writing-mode將水平流改成豎直流，不就形成垂直居中了嗎？

在父級上加上如下樣式

.content{
  writing-mode: tb-rl; /**內(nèi)容從上往下(top-bottom)，從右往左(right-left)垂直流動，下面是一些兼容性寫法**/
  -webkit-writing-mode: vertical-rl;      
  writing-mode: vertical-rl;
  text-align: center;
}

這樣也可以做到垂直居中，不過要注意的是，現(xiàn)在里面的文本也會變成從上到下排列，所以需要重置一下。

還有一個問題就是，如果這個時候要想水平居中就gg了，原理和剛才反過來，可以通過套一層改變流向來解決，具體實現(xiàn)可以參考demo

優(yōu)點: 適應(yīng)性好，兼容性好

缺點: 算是一個偏方吧。而且writing-mode的語法太雜，各種各樣的，所以。。玩玩就好

6. flex大法

這個方法接觸過css3的應(yīng)該都接觸過吧，只要在父級加上如下代碼就能實現(xiàn)垂直居中了

.content{
  display:flex;
  justify-content: center;
  align-items: center;
}

如果對瀏覽器沒什么要求，盡量都用這種方式吧。

優(yōu)點: 寫法簡單，適應(yīng)性好

缺點: 兼容性一般，不支持ie8瀏覽器

小節(jié)

以上共有6種方式來實現(xiàn)垂直居中的效果，個人是最青睞第4種方式的，兼容性好，適應(yīng)性好，各位小伙伴還有沒有其他的實現(xiàn)方式呢？

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113906.html

相關(guān)文章

  • CSS 常用的定位和布局方法匯總(已添加源碼地址)

    CSS-Layout 旨在打造詳盡的前端布局代碼學習庫（自從用了框架開發(fā)，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網(wǎng)址，所以某些預(yù)覽鏈接無法跳轉(zhuǎn)，請訪問我的博客閱讀此文 常見定位方法 水平居中 子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。 方案選擇基本思路：子元素為 行內(nèi)元素：對父元素設(shè)置text-align:center; 定寬塊狀元素: 設(shè)...

    loonggg 評論0 收藏0

  • css-元素居中

    摘要：一水平居中行內(nèi)元素水平居中使用屬性可以實現(xiàn)在行內(nèi)元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結(jié)構(gòu)塊級元素垂直居中。 本文重要是匯總了關(guān)于水平居中，垂直居中，還有水平垂直居中的各種方法。 一、水平居中 1.行內(nèi)元素水平居中 使用text-align:center;屬性可以實現(xiàn)在行內(nèi)元素（包括：inline,inline-block、inline-tabl...

    miqt 評論0 收藏0

  • 前端面試匯總(html+css)

    摘要：前端頁面有哪三層組成分別是什么有什么作用前端頁面由結(jié)構(gòu)層，表示層，行為層組成。作用標準模式與兼容模式有什么區(qū)別聲明位于文檔的第一行，處于標簽之前，告知瀏覽器的解析器用什么文檔標準解析這個文檔，不存在或者格式不正確會導(dǎo)致文檔以兼容模式存在。 HTML: 1、前端頁面有哪三層組成？分別是什么？有什么作用？ 前端頁面由結(jié)構(gòu)層HTML，表示層CSS，行為層JS組成。 2、HTML5為什么只用...

    wangjuntytl 評論0 收藏0

  • 前端面試匯總(html+css)

    摘要：前端頁面有哪三層組成分別是什么有什么作用前端頁面由結(jié)構(gòu)層，表示層，行為層組成。作用標準模式與兼容模式有什么區(qū)別聲明位于文檔的第一行，處于標簽之前，告知瀏覽器的解析器用什么文檔標準解析這個文檔，不存在或者格式不正確會導(dǎo)致文檔以兼容模式存在。 HTML: 1、前端頁面有哪三層組成？分別是什么？有什么作用？ 前端頁面由結(jié)構(gòu)層HTML，表示層CSS，行為層JS組成。 2、HTML5為什么只用...

    Carbs 評論0 收藏0

發(fā)表評論

0條評論

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