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

資訊專欄INFORMATION COLUMN

css垂直水平居中解決方案

taoszu / 2495人閱讀

摘要：寫(xiě)在前面垂直水平居中即垂直與水平方向上都要居中，也就是視覺(jué)效果中的，處于視圖的正中間。我們把需要垂直水平居中的設(shè)置為。使用使塊級(jí)元素垂直居中是很簡(jiǎn)單的。

寫(xiě)在前面：

垂直水平居中即垂直與水平方向上都要居中，也就是視覺(jué)效果中的，處于視圖的正中間。下面，我們來(lái)講講幾個(gè)css中常用的垂直水平居中的解決方案

方法1:

1、把外層的div的顯示方式設(shè)置為table，即display: table;

2、把內(nèi)層的div的顯示方式設(shè)置為table-ceil，即display: table-ceil;

這樣一來(lái)，我們就可以把這格html結(jié)構(gòu)看成表格和表格中的一個(gè)小格。由于表格中只有一個(gè)ceil，所以它會(huì)自動(dòng)撐開(kāi)整個(gè)表格，給它設(shè)置寬高是無(wú)效的，它的寬高是wrapper的寬高。ceil中的內(nèi)容content就可以自動(dòng)垂直居中了。

其中：

垂直居中： 利用vertical-align: middle;

水平居中： 利用text-align: center;

具體代碼如下：

 

   

     
Hello world!

css代碼：

  .wrapper {
      display: table;
      width: 400px;
      height: 200px;
      background-color: red;
   }
   .ceil {
      display: table-cell;
      vertical-align: middle;
      background-color: blue;
      text-align: center;
   }

效果如下：

接著我們把content中的內(nèi)容加長(zhǎng)看看效果：

從上面可以看到，wrapper本來(lái)應(yīng)該是紅色背景的，但是現(xiàn)在整個(gè)ceil撐開(kāi)了整個(gè)表格，所以把wrapper的背景覆蓋了，呈現(xiàn)出藍(lán)色。

優(yōu)點(diǎn)：

content 可以動(dòng)態(tài)改變高度(不需在 CSS 中定義)。當(dāng) wrapper 里沒(méi)有足夠空間時(shí)，content不會(huì)被截?cái)啵簿褪钦f(shuō)content會(huì)自動(dòng)撐開(kāi)wrapper

缺點(diǎn)：

實(shí)現(xiàn)起來(lái)比較繁瑣，需要額外嵌套的標(biāo)簽。

方法2：

絕對(duì)定位法。
1、我們把需要垂直水平居中的position設(shè)置為absolute。
2、設(shè)置top為0， left為0，margin為寬高一半的負(fù)值。即把盒先一種偏中間的地方，然后再進(jìn)行微調(diào)：


  
Hello World!


.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: blue;
   top: 50%;
   left: 50%;
   margin-top: -50px;  // 高的一半，視實(shí)際情況而定
   margin-left: -50px;  // 寬的一半，視實(shí)際情況而定
}

注意：絕對(duì)定位absolute，是相對(duì)于最近非static的祖先元素進(jìn)行定位的，所以我們要在其相對(duì)定位的元素上定義display屬性。

同樣當(dāng)文字溢出的時(shí)候：

優(yōu)點(diǎn)：

適用于所有瀏覽器

不需要嵌套標(biāo)簽

缺點(diǎn)：

由于高度是限定好的，沒(méi)有足夠空間時(shí)，content會(huì)溢出，這時(shí)我們可以設(shè)置：overflow:auto; 這時(shí)當(dāng)溢出的時(shí)候就會(huì)出現(xiàn)滾動(dòng)條。

方法3:

在方法2的基礎(chǔ)上進(jìn)行改動(dòng)，把margin負(fù)值改為transform和 translate

.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   background-color: blue;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

優(yōu)點(diǎn)，不需要定義寬高，靈活性高
缺點(diǎn)：仍要注意截?cái)鄦?wèn)題
方法4:

這個(gè)方法使用了 position:absolute，有固定寬度和高度的 div。這個(gè) div 被設(shè)置為 top:0; bottom:0;。但是因?yàn)樗泄潭ǜ叨龋鋵?shí)并不能和上下都間距為 0，因此 margin:auto; 會(huì)使它居中。使用 margin:auto;使塊級(jí)元素垂直居中是很簡(jiǎn)單的。

 Content here
  
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}
優(yōu)點(diǎn)：

簡(jiǎn)單

缺點(diǎn)：

IE(IE8 beta)中無(wú)效

無(wú)足夠空間時(shí)，content 被截?cái)啵遣粫?huì)有滾動(dòng)條出現(xiàn)

方法5:

最常用的單行文本居中
這個(gè)方法只能將單行文本居中。
1、把 line-height設(shè)置為那個(gè)對(duì)象的 height 值使文本垂直居中
2、把 text-align 設(shè)置為center，使文本水平居中

Hello world!
  
.content {
    height: 100px;
    line-height: 100px;
    text-align: center;
}
優(yōu)點(diǎn)：

適用于所有瀏覽器

無(wú)足夠空間時(shí)不會(huì)被截?cái)?/p> 

缺點(diǎn)：

只對(duì)文本有效(塊級(jí)元素?zé)o效)

多行時(shí)，斷詞比較糟糕

這個(gè)方法在小元素上非常有用，例如使按鈕文本或者單行文本居中。

方法6:

完美居中方案 —— flex布局

.parent{
    display : flex;
    width : 300px;
    height : 300px;
    background-color : red;
}
.child{
    width : 100px;
    height : 50px;
    margin : auto;
    background-color: green;
}
關(guān)鍵點(diǎn)：
1、display：flex；
2、margin：auto；

參考資料：
css實(shí)現(xiàn)垂直居中的5種方法

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

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

相關(guān)文章

  • 【前端】這可能是你看過(guò)最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類(lèi)型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類(lèi)型元素（inline-block，inline-table，i...

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

  • 【前端】這可能是你看過(guò)最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類(lèi)型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類(lèi)型元素（inline-block，inline-table，i...

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

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過(guò)設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問(wèn)題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

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

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過(guò)設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問(wèn)題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

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

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過(guò)設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問(wèn)題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

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

  • 對(duì)css居中的一點(diǎn)總結(jié)

    摘要：為了更好的加深對(duì)居中的理解，搜集和閱讀相關(guān)資料，發(fā)現(xiàn)不錯(cuò)的文章將其整理出來(lái)。 在學(xué)習(xí)前端的過(guò)程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會(huì)出現(xiàn)的問(wèn)題，在實(shí)際工作中也會(huì)經(jīng)常碰到。居中的技巧有很多，但在編寫(xiě)代碼的過(guò)程中，發(fā)現(xiàn)有時(shí)候技巧管用，有時(shí)候不管用，于是就將每個(gè)知道的方案都試一遍，找到合適的。這種情況究其原因是對(duì)居中的認(rèn)識(shí)不夠深入，只是停留在實(shí)現(xiàn)需求的水平上。為了更好的加深對(duì)居中的...

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

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

0條評(píng)論

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