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

資訊專欄INFORMATION COLUMN

不定元素寬高用css實現內容水平和垂直都居中

Chao / 2956人閱讀

摘要：在開發中經常遇到這個問題，即讓某個元素的內容在水平和垂直方向上都居中，內容不僅限于文字，可能是圖片或其他元素。這篇文章就來總結一下都有哪些方法可以實現水平和垂直都居中。表示這些元素將相對于本容器水平居中，也是同樣的道理垂直居中。

在開發中經常遇到這個問題，即讓某個元素的內容在水平和垂直方向上都居中，內容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說，我們不知道父元素的寬高，也不知道內容元素的寬高。這篇文章就來總結一下都有哪些方法可以實現水平和垂直都居中。

不適合的方案 text-align和line-height

顯然，使用text-align和line-height的方式更適合單排文字，而不適合本文的需求。特別是line-height，無法保證在不知道高度的情況下還能垂直居中。而且就算是文字，我們也不知道文字有多少行。

position:absolute、50%和margin:-px

絕大多數情況下，我們可以考慮這種方案，讓想要居中的元素通過定位和margin為負值進行偏移的方法讓它在垂直方向上居中。這種方案不要求父元素的高度，也就是即使父元素的高度變化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一樣的操作。但是這里有一個問題，就是我們的需求往往是內部的這個元素的寬度高度也不確定，比如是一段文字，你無法保證這段文字的字數多少，所以通過margin為負值來偏移在這種情況下行不通。

position:fixed、0和margin:auto

當我們要制作一個modal dialog彈出框時，比如彈出居中于屏幕的廣告或登錄框。這個時候可以考慮一些相對于窗口或網頁居中的方案。





 this is a box fixed in center of screen

這里面最重要的是margin: auto;，對于塊級元素而言，確定了自己的寬度之后，margin:auto可以幫助它居中，即使在position:fixed時。不過必須規定要居中的元素的寬高度，無法滿足我們的需求。

position:absolute、0和margin:auto

上面的fixed方案只適合在整個窗口實現居中。fixed會使元素脫離網頁，因此在內容流中還是不適用。在內容流中也想實現居中，可以如下：

 



    
This is a p

    



















    

        this is a box fixed in center of screen

首先是仿造上面一個方法，使用margin:auto，只不過使用absolute。使用absolute定位的話，父級元素必須也具有position（不為static）。所以把.inner放在一個有position的父級元素.container。這樣.inner相對于.container就是居中的（前提還是.inner要有寬高）。接下來的問題就是怎樣讓.container具備和內容相同的高寬，通過.container的父級元素為position:relative，.container為absolute，再使用100%使.container和父級元素寬高相同即可。同理因為要設定寬高，所以不滿足我們的需求。

正確的方案 display:table和vertical-align:middle

這個方案是理解上最容易的，因為table具備垂直居中的屬性，所以很容易通過屬性就能實現。





  

    you own content

這種情況下，我們可以通過隨意改變.inner的寬高，當內部的內容仍然保持居中狀態。

DEMO

position:absolute、50%和translate

在css3里面提供了translate函數，它的主要作用是位移，傳給transform屬性。





  

    your own content

html代碼和上面一樣。translate(-50%, -50%)將會將元素位移自己寬度和高度的-50%。這種方法其實和最上面被否定掉的margin負值用法一樣，可以說是margin負值的替代方案。這樣你就非常容易理解了。這個方法最厲害的地方是不需要確定.inner的寬高，而.container的寬高也不需要手動設置，如果它自己本身就被撐大的話。這里只是為了演示方便，才特意給它設置了寬高。

DEMO

vw vh和translate

vh和vw是兩個比較偏的單位，是指“viewport的height和width的1%”，比如說50vh就是當前視口（窗口的高度，實驗中包含了滾動條）高度的50%。也就是說1vw將等于和1%的window寬度差不多的值。因此用在fixed的時候更加適合。





    this is a box fixed in center of screen

其實和使用50%沒有太大的差別，因為這時top、left取的50%是相對于父元素的，和margin、padding不一樣。如果非得要margin的話，就可以從這里衍生出變體：

 .inner2 {
   position:fixed;
   top: 0;
   left: 0;
   margin: 50vh 0 0 50vw;
   transform: translate(-50%, -50%);
 }

vh vw只能從窗口的大小去考慮，不適合正常的文本流。不過有的時候可以非常有用，特別是在做全屏應用的時候，比如full page。我把兩種方案都放在了演示中，你可以在DEMO查看。

DEMO

:before和display:inline-block

這也是一種處理方式，通過偽類:before在元素內增加新元素后在用display:inline-block，通過高度的處理得到想要的效果。





    

        this is a box fixed in center of screen
The second line

這個方案是比較特別一些，不是很好理解。首先，.container水平居中沒問題。接著，給.container偽類:before設定為height:100%，這樣可以用一個偽元素在.container獲得與父元素等高的空間。然后用inline-block和vertical-align: middle改變對齊的基線，關于這一點，我也不甚懂，這里有一篇文章可以參考。通過:before之后，.container內的行級元素的對齊基線就跑到居中的位置，也就實現了垂直居中對齊。這個時候，如果里面僅一排文字，其實可以不用.inner，但是上面的例子里面有一個
，這就不一樣了。如果直接把文字放在.container里面，
之前的文字會基于:before基線，會保持垂直對齊的狀態。但是
之后的文字會另起一行，這一行將起始于:before的下一行，所以會在:before的100%高度下面，導致被頂出.container。但是如果把文字放在.inner里面，再讓.inner為inline-block，就可以使.inner和:before處于同一基線，這樣就讓整個.inner處于垂直居中的狀態。

DEMO

css3 display:flex

css3新增了布局相關的屬性，其中flex布局可以非常簡單地幫我們實現我們想要的效果。





    

        this is a box fixed in center of screen
The second line

簡單解釋一下，當display: flex時，表示該容器內部的元素將按照flex進行布局。align-items: center表示這些元素將相對于本容器水平居中，justify-content: center也是同樣的道理垂直居中。對.container賦予了這些樣式之后，作為它的內部元素.inner自己自覺的居中了。而且這里你會發現，由于沒有使用text-align: center，.inner里面的文字是不會居中的，也就是說僅僅.inner這個容器居中而已。

DEMO

總結

從上面的幾種可行的方案，大致可以分為兩類：display對齊方案、translate位移方案。display方案是充分發揮css的布局特性，利用布局和UI引擎的特性來控制布局中的對齊方式。而translate方案則是利用位移，通過先50%的位移，可以是通過position，也可以是通過margin vw vh，但是完成之后，在通過translate把元素拉回去，之所以用translate而不是margin是因為translate是相對于元素本身，而margin不是。

本文發表在我的博客 http://www.tangshuang.net/319...
如有疑問或不足之處，請到博客留言

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

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

相關文章

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...

    lijinke666 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...

    hedge_hog 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應布局 左邊右邊定寬中間自適應三列布局 最...

    kun_jian 評論0 收藏0

  • 【CSS】水平垂直居中的4種實現（寬高不定）

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

    cppowboy 評論0 收藏0

  • CSS實現水平垂直居中的1010種方式（史上最全）

    摘要：劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了要實現上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下實現水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個倉庫，歡迎大家僅居中元素定寬高適 劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

    YuboonaZhang 評論0 收藏0

發表評論

0條評論

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