整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS 垂直居中方法匯總

          直居中-父元素高度確定的單行文本

          父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的height和line-height高度一致來實(shí)現(xiàn)的。如下代碼:

          <div class="container">
          hi,imooc!
          </div>

          css代碼:

          <style>
              .container{
              height:100px;
              line-height:100px; /* 僅能用于單行文本 */
              background:#999;
          }
          </style>

          垂直居中-圖片以及行內(nèi)塊元素

          <div class="container">
          <img src="imgegs/icon.png" />
          </div>

          css代碼:

          <style>
          .container{
              height:100px;
              background:#999;
          }
          .container img{
              vertical-align:middle;
          }
          </style>

          垂直居中-父元素高度確定的多行文本(方法一)

          父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種:

          方法一:使用插入table(包括tbody、tr、td)標(biāo)簽, 同時(shí)設(shè)置vertical-align:middle。

          說到豎直居中,css中有一個(gè)用于豎直居中的屬性vertical-align,但這個(gè)樣式只有在父元素為td 或th時(shí),才會(huì)生效。所以又要插入table標(biāo)簽了。

          下面看一下例子:

          html代碼:

          <body>
          <table><tbody><tr><td class="wrap">
          <div>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          </div>
          </td></tr></tbody></table>
          </body>

          css代碼:

          table td{height:500px;background:#ccc}

          因?yàn)閠d標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了vertical-align為middle, 所以我們不需要顯式地設(shè)置了。

          垂直居中-父元素高度確定的多行文本(方法二)

          在chrome、firefox及IE8以上的瀏覽器下可以設(shè)置塊級(jí)元素的display為table-cell, 激活vertical-align屬性, 但注意IE6、7并不支持這個(gè)樣式。

          html代碼:

          <div class="container">
          <div>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          </div>
          </div>

          css代碼:

          <style>
          .container{
              height:300px;
              background:#ccc;
              display:table-cell; /*IE8以上及Chrome、Firefox*/
              vertical-align:middle; /*IE8以上及Chrome、Firefox*/
          }
          </style>

          這種方法的好處是不用添加多余的無意義的標(biāo)簽,但缺點(diǎn)也很明顯,它的兼容性不是很好,不兼容 IE6、7。

          垂直居中--方法三

          <!DOCTYPE html>
          <html lang="zh">
          <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Document</title>
          <style type="text/css">
          *{
              margin: 0;
              padding: 0;
          }
          div{
              width: 400px;
              height: 300px;
              background-color: orange;
          }
          /*
          * 思路一:left:50%;top:50%;margin-left: -200px;margin-top: -150px;
          * 思路二:left:0;top:0;right:0;bottom:0;margin:auto;
          * */
          
          div{
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%); /* 平移 */
          }
          </style>
          </head>
          <body>
          <div></div>
          </body>
          </html>

          實(shí)例1:將內(nèi)層div的文本垂直居中

          <!DOCTYPE HTML>
          <html>
          <head>
          <meta charset="utf-8">
          <title>父元素高度確定的多行文本</title>
          <style>
          .container{
              height:300px;
              background:#ccc;
              display:table-cell; /*IE8以上及Chrome、Firefox*/
              vertical-align:middle; /*IE8以上及Chrome、Firefox*/
          }
          </style>
          </head>
          <body>
          <div class="container">
          <div>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          <p>看我是否可以居中。</p>
          </div>
          </div>
          <!--下面是代碼任務(wù)區(qū)-->
          </body>
          </html>

          實(shí)例2:將內(nèi)層垂直居中、外層水平居中

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>無標(biāo)題文檔</title>
          <style type="text/css">
          #content{
              width:300px;
              height:300px;
              border:#000 solid 1px;
              margin:auto;
              display:table;
          }
          #wenzi{
              border:#F00 solid 1px;
              text-align:center;
              display:table-cell;
              vertical-align: middle;
          }
          </style>
          </head>
          <body>
          <div id="content">
          <div id="wenzi">
          鋤禾日當(dāng)午,<br>
          汗滴禾下土。<br>
          誰知盤中餐,<br>
          粒粒皆辛苦。<br>
          </div>
          </div>
          </body>
          </html>

          實(shí)例3: 使用絕對(duì)定位垂直居中

          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <title>Document</title>
          <style type="text/css">
          *{
              margin: 0;
              padding: 0;
          }
          div{
              width: 220px;
              height: 280px;
              background: url("img/王思聰.jpg");
              position: absolute;
              left: 50%;
              top: 50%;
              margin-left: -110px;
              margin-top: -140px;
          }
          </style>
          </head>
          <body>
          <!--
          行內(nèi)元素(文本)->水平垂直居中
          text-align: center;
          line-height: height;
          -->
          <!--
          塊元素->水平垂直居中
          margin: 0 auto;
          -->
          <div></div>
          </body>
          </html>

          實(shí)例4: 使用絕對(duì)定位垂直居中

          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <title>Document</title>
          <style type="text/css">
          *{
              margin: 0;
              padding: 0;
          }
          div{
              width: 600px;
              height: 200px;
              padding: 10px 20px;
              border: 1px solid #000;
              border-radius: 5px;
              /* 下面這種寫法也可以讓一個(gè)盒子居中 */
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
          }
          </style>
          </head>
          <body>
          <div>您確定刪除:重慶萬州公交墜江事件結(jié)果公布后,司乘糾紛和公交駕駛安全問題成為人們熱議的焦點(diǎn),如何預(yù)防和避免惡性結(jié)果的發(fā)生,才是問題的關(guān)鍵。“鼓勵(lì)市民舉報(bào),并對(duì)勇于制止干擾公交車正常行駛違法行為的公民予以獎(jiǎng)勵(lì)。”昨日下午,西安市公安局公共交通分局召開媒體通氣會(huì),通報(bào)西安相關(guān)安全舉措。這條消息嗎</div>
          </body>
          </html>

          絕對(duì)定位(固定定位)之后, 所有標(biāo)準(zhǔn)流的規(guī)則, 都不適用了。所以margin:0 auto; 失效。

          解決辦法:left:50%; margin-left:負(fù)的寬度的一半。(三句話)

          div{
          width: 600px;
          height: 60px;
          position: absolute;  /* → 第一句  */
          left: 50%;   //   /*  → 第二句   */ 
          top: 0;
          margin-left: -300px;    /*→ 第三句。寬度的一半*/
          }

          實(shí)例4:使用絕對(duì)定位和margin:auto垂直居中

          實(shí)際工作中,經(jīng)常會(huì)遇到容器居中問題,而CSS容器水平和垂直居中的方法,網(wǎng)絡(luò)上已經(jīng)有很多相關(guān)文章,在這里,我也對(duì)工作中用到的一些居中方法進(jìn)行了總結(jié),并加入了一些自己的觀點(diǎn),如有錯(cuò)誤歡迎指正。

          假設(shè)有如下html和樣式,我們需要將inner容器居中:

          一、絕對(duì)定位:首先讓outer相對(duì)定位relative,其次讓inner絕對(duì)定位absolute,同時(shí)left和top都是50%,此時(shí)inner的左上角在outer的正中間,所以,只要讓它margin-left和margin-top都是負(fù)的自身高度的一半即可:

          效果如下:

          此外,這種寫法的:

          margin-left和margin-top也可以換成transform:translate(-100px,-100px)。

          注:這里的inner是必須要有寬高

          二、絕對(duì)定位2:首先讓outer相對(duì)定位relative,其次讓inner絕對(duì)定位absolute,四個(gè)方向的距離都為0,再加上margin:auto即可:

          效果如下:

          注:這里的inner是必須要有寬高的,因?yàn)樗膫€(gè)方向都為0,一旦不寫寬度,inner就會(huì)“觸及底線”。

          三、模擬單元格table-cell:因?yàn)楸砀駟卧竦膙ertical-align:middle,可以輕松讓里面的內(nèi)容垂直居中,這個(gè)方法就是利用這個(gè)特性來實(shí)現(xiàn)垂直居中的:

          注:1、outer由于變成了表格,不再像普通的塊容器寬度默認(rèn)一整行,所以要加上寬度。

          2、這個(gè)方法既適用于固定高度的容器,也適用于不固定高度的容器。

          四、CSS3的flex:outer要變成flex容器,并且垂直居中用align-items: center,水平居中用:justify-content: center

          注:此方法非常好用,當(dāng)然不考慮兼容性。而且,inner無論是否有寬高都適用。

          五、CSS3的flex配合margin:此方法可以被視為上面的升級(jí)版,outer要變成flex容器,inner邊距自動(dòng)即可

          注:此方法非常好用,當(dāng)然不考慮兼容性。而且,inner無論是否有寬高都適用。

          好東西就要總結(jié)起來,好東西就要收藏起來,隨著瀏覽器兼容性越來越好,上面的很多方法已經(jīng)可以放心使用了。當(dāng)然,如果各位有更好的方法,歡迎在下方評(píng)論留言哦!

          過前端開發(fā)的朋友都知道,要使文字在一個(gè)div容器垂直居中顯示是很簡單的事,但是如果是要讓一張圖片在div容器中垂直顯示那就有點(diǎn)傷腦筋了,因?yàn)閳D片是個(gè)置換元素,有些特殊的特性,對(duì)于前端開發(fā)的大牛來說還好,解決方法有很多,比如什么利用js啊之類的,但是這些對(duì)于初學(xué)者來說就有些難度了,今天小編就把自己平時(shí)在項(xiàng)目中用的方法分享給大家,給大家一個(gè)參考。

          其實(shí)小編用的方法也不是什么很高端的技術(shù),算是最low的方法吧,但是很實(shí)用,能兼容各種瀏覽器,為了演示,小編直接從某寶商家店鋪里拿了一張商品圖來做演示,因?yàn)樯唐穲D都是高清無碼的,且還很大,所以我們?cè)贑SS中把圖片的高度設(shè)置為200px,div容器的高度為300px,完整的代碼如下:

          最終的運(yùn)行效果如下圖:

          可以看到,這個(gè)圖片在div中水平、垂直都是在正中間,是不是很完美。這個(gè)原理也很簡單,就是在div容器中加了個(gè) <i> 標(biāo)簽并把它的 display 屬性設(shè)置為 inline-block(行內(nèi)塊元素),讓它去撐開div容器的高度,再把圖片的 vertical-align 屬性設(shè)置為 middle 就可以垂直居中了,當(dāng)然這只是個(gè)演示,大家在實(shí)際的項(xiàng)目中可以利用 max-width、min-width、max-height、min-height 等屬性讓圖片根據(jù)需要自適應(yīng),以達(dá)到想要的效果。

          當(dāng)然解決方法還有很多種,具體用什么方法需根據(jù)自身頁面布局去權(quán)衡,總之沒有最好的,只有最適合的,如果你有更好的方法也可以告訴小編哦,一起交流方法,共同進(jìn)步。


          主站蜘蛛池模板: 一区二区视频在线| 亚洲AV噜噜一区二区三区| 视频在线观看一区| 亚洲福利一区二区三区| 538国产精品一区二区在线| 国产一区二区在线观看| 亚洲熟妇av一区二区三区下载| 香蕉久久ac一区二区三区| 亚洲午夜一区二区三区| 中文字幕日韩精品一区二区三区| 亚洲国产一区在线观看| 精品aⅴ一区二区三区| 国产一区二区三区小向美奈子| 精品一区二区三区无码免费直播 | 亚洲性日韩精品国产一区二区| 无码精品人妻一区二区三区漫画 | 亚洲午夜一区二区三区| 日产一区日产2区| 亚洲乱码一区二区三区在线观看| 日韩一区二区在线观看视频| 国产一区二区三区免费观在线 | 精品一区二区久久久久久久网站| 成人区人妻精品一区二区不卡视频| 国产乱码精品一区二区三区四川人| 99精品一区二区免费视频| 日产亚洲一区二区三区| 亚洲综合一区二区精品久久| 无码人妻AⅤ一区二区三区| 亚洲av无码一区二区三区不卡| 精品国产一区二区三区香蕉| 97久久精品无码一区二区天美| 麻豆果冻传媒2021精品传媒一区下载| 夜色福利一区二区三区| 国产精品高清视亚洲一区二区| 天美传媒一区二区三区| 一区在线观看视频| 亚洲熟妇av一区二区三区下载| 日本国产一区二区三区在线观看| 精品国产一区二区三区av片 | 亚洲综合色一区二区三区| 亚洲av色香蕉一区二区三区|