整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          css篇-前端面試中常問的div居中方法

          上又要到秋招的時候了,又有不少人打算換工作了。前端在面試中總會被問到的一道基礎題div居中方法,這里給大家總結一下都有哪些常用的方法。

          絕對定位

          • 父級元素(parent)采用相對定位(relative),需要居中的元素(demo)采用絕對定位(absolute)。
          • 居中元素向上偏移50%,向左偏移50%,此時左頂點位于中心,不過我們需要的是整體居中,所以在偏移自身一半的寬高。(如下圖)

          還未偏移一半自身寬高

          <style>
              .parent {
                position: relative;
                width: 500px;
                height: 500px;
                border: solid red 1px;
              }
              .demo {
                position: absolute;
                width: 100px;
                height: 100px;
                border: solid blue 1px;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
              }
            </style>
            <body>
              <div class="parent">
                <div class="demo"></div>
              </div>
            </body>

          彈性方法居中

          通過flex彈性布局設置垂直居中和水平居中

            <style>
              .parent {
                width: 500px;
                height: 500px;
                border: solid red 1px;
                display: flex;
                // 垂直,水平居中
                align-items: center;
                justify-content: center;
              }
              .demo {
                width: 100px;
                height: 100px;
                border: solid blue 1px;
              }
            </style>
            <body>
              <div class="parent">
                <div class="demo"></div>
              </div>
            </body>

          使用transform居中

          在子元素不知道自身寬高情況,使用transform進行比偏移。

            <style>
              .parent {
                position: relative;
                width: 500px;
                height: 500px;
                border: solid red 1px;
              }
              .demo {
                position: absolute;
                border: solid blue 1px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            </style>
            <body>
              <div class="parent">
                <div class="demo">居中</div>
              </div>
            </body>

          以上3種是常用的方法,當然還有其他居中方法比如grid布局,table-cell布局等。

          之所以整理這類專題的手冊,就是CSS相關的內容實在太碎和零散,同時又夾雜著相關的兼容問題。遇到問題時,我們有時候過度依賴搜索引擎進行求證解決,解決完也沒做認真的歸納和總結。再次遇到此類問題時,我們有可能還不會,這就是我歸納這個手冊的目的,我會把日常工作中經常會用到的高頻CSS相關方法歸納到這個手冊里(有的內容可能來源其它作者),歡迎你持續的訂閱和關注。

          今天我們一起來梳理下CSS垂直居中的幾種方法,我們在布局一個頁面時,通常都會用到水平置中和垂直置中,處理水平居中很好處理,不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題,但一直以來最麻煩對齊問題就是「垂直居中」,以下將介紹七種單純利用CSS垂直置中的方式,其實一點也不難(當然跟水平居中比起來難了一點),只需要理解背后的原理就可以輕松應用。

          1、設定行高( line-height )

          設定行高是垂直居中最簡單的方式,適用于「單行」的「行內元素」 ( inline、inline-block ),例如單行的標題,或是已經設為inline-block屬性的div,若將line-height設成和高度一樣的數值,則內容的行內元素就會被垂直置中,因為是行高,所以會在行內元素的上下都加上行高的1/2,所以就垂直置中了!不過由此就可以看出,為什么必須要單行的行內元素,因為如果多行,第二行與第一行的間距會變超大,就不是我們所期望的效果了。CSS范例:外層div0,內容redbox,讓redbox水平垂直置中。

          .div0{
           width:200px;
           height:150px;
           border:1px solid #000;
           line-height:150px;
           text-align:center;
          }
          .redbox{
           display:inline-block;
           width:30px;
           height:30px;
           background:#c00;
          }
          

          2、添加偽元素( ::before、::after )

          剛剛第一種方法,雖然是最簡單的方法(適用于單行標題),不過就是只能單行,所以我們如果要讓多行的元素也可以垂直居中,就須要使用偽元素的方式。在此之前,先解釋一下CSS里頭vertical-align這個屬性,這個屬性雖然是垂直置中,不過卻是指在元素內的所有元素垂直位置互相置中,并不是相對于外框的高度垂直居中。(下面的CSS會造成這種樣子的垂直居中)

          .div0{
           width:200px;
           height:150px;
           border:1px solid #000;
           text-align:center;
          }
          .redbox{
           width:30px;
           height:30px;
           background:#c00;
           display:inline-block;
           vertical-align:middle;
          }
          .greenbox{
           width:30px;
           height:60px;
           background:#0c0;
           display:inline-block;
           vertical-align:middle;
          }
          .bluebox{
           width:30px;
           height:40px;
           background:#00f;
           display:inline-block;
           vertical-align:middle;
          }
          

          因此,如果有一個方塊變成了高度100%,那么其他的方塊就會真正的垂直居中。

          .greenbox{
           width:30px;
           height:100%;
           background:#0c0;
           display:inline-block;
           vertical-align:middle;
          }
          

          但是我們總不能每次要垂直居中,都要添加一個奇怪的div在里頭吧!所以我們就要把腦筋動到「偽元素」身上,利用::before和::after添加div進到框框內,讓這個「偽」div的高度100%,就可以輕松地讓其他的div都居中。不過不過不過!div記得要把display設為inline-block,畢竟 vertical-align:middle 是針對行內元素,div本身是block,所以必須要做更改!

          .div0::before{
           content:'';
           width:0;
           height:100%;
           display:inline-block;
           position:relative;
           vertical-align:middle;
           background:#f00;
          }
          

          3、calc 動態計算

          看到這邊或許會有疑問,如果今天我的div必須是block,我該怎么讓它垂直居中呢?這時候就必須用到CSS特有的calc動態計算的能力,我們只要讓要居中的div的top屬性,與上方的距離是「50%的外框高度- 50%的div高度」,就可以做到垂直居中,至于為什么不用margin-top,因為margin抓到的是水平高度,必須要用top才會正確。

          .div0{
           width:200px;
           height:150px;
           border:1px solid #000;
          }
          .redbox{
           position:relative; 
           width:30px;
           height:30px;
           background:#c00;
           float:left;
           top:calc(50% - 15px);
           margin-left:calc(50% - 45px);
          }
          .greenbox{
           position:relative;
           width:30px;
           height:80px;
           background:#0c0;
           float:left;
           top:calc(50% - 40px);
          }
          .bluebox{
           position:relative; 
           width:30px;
           height:40px;
           background:#00f;
           float:left;
           top:calc(50% - 20px);
          }
          

          4、 使用表格或假裝表格

          或許有些人會發現,在表格這個HTML里,要實現垂直置中是相當容易的,只需要下一行vertical-align:middle就可以,為什么呢?最主要的原因就在于table的display是table,而td的display是table-cell,所以我們除了直接使用表格之外,也可以將要垂直置中元素的父元素的display改為table-cell,就可以輕松實現,不過修改display有時候也會造成其他樣式屬性的連動影響,需要小心使用。

          HTML:

          <table>
           <tr>
           <td>
           <div>表格垂直居中</div>
           </td>
           </tr>
          </table>
          <div class="like-table">
           <div>假的表格垂直居中</div>
          </div>
          

          CSS:

          .like-table{
           display:table-cell;
          }
          td,
          .like-table{
           width:150px;
           height:100px;
           border:1px solid #000;
           vertical-align: middle;
          }
          td div,
          .like-table div{
           width:100px;
           height:50px;
           margin:0 auto;
           color:#fff;
           font-size:12px;
           line-height: 50px;
           text-align: center;
           background:#c00;
          }
          .like-table div{
           background:#069;
          }
          

          5、transform

          transform是CSS3的新屬性,主要用于元素的變形、旋轉和位移,利用transform里頭的translateY (改變垂直的位移,如果使用百分比為單位,則是以元素本身的長寬為基準),搭配元素本身的top屬性,就可以做出垂直居中的效果,需要注意的地方是,子元素必須要加上position:relative,不然就會沒有效果喔。

          .use-transform{
           width:200px;
           height:200px;
           border:1px solid #000;
          }
          .use-transform div{
           position: relative;
           width:100px;
           height:50px;
           top:50%;
           transform:translateY(-50%);
           background:#095;
          }
          

          6、絕對定位

          絕對定位就是CSS里頭的position:absolute,利用絕對位置來指定,但垂直置中的做法又和我們正統的絕對位置不太相同,是要將上下左右的數值都設為0,再搭配一個margin:auto,就可以辦到垂直置中,不過要特別注意的是,設定絕對定位的子元素,其父元素的position必須要指定為relative喔!而且絕對定位的元素是會互相覆蓋的,所以如果內容元素較多,可能就會有些問題。

          .use-absolute{
           position: relative;
           width:200px;
           height:150px;
           border:1px solid #000;
          }
          .use-absolute div{
           position: absolute;
           width:100px;
           height:50px;
           top:0;
           right:0;
           bottom:0;
           left:0;
           margin:auto;
           background:#f60;
          }
          

          7、使用Flexbox

          Flexbox可謂是我們在移動端用的最多的布局方法,因為大部分現代手機瀏覽器都支持這個方法了。Flexbox,使用align-items或align-content的屬性,輕輕松松就可以做到垂直居中的效果喔!

          .use-flexbox{
           display:flex;
           align-items:center;
           justify-content:center;
           width:200px;
           height:150px;
           border:1px solid #000;
          }
          .use-flexbox div{
           width:100px;
           height:50px;
           background:#099;
          }
          

          由于flexbox布局的屬性眾多,如何方便記憶,筆者贈送大家一張圖:

          上圖有可能你看不清楚,此圖高清無碼地址,歡迎下載使用:

          https://www.qianduandaren.com/demo/images/flex.png

          本文內容參考來源

          https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

          由于源文是繁體,筆者在內容上做了一些調整。

          小節

          以上就是筆者整理的一些垂直居中的方法,由于垂直居中往往會動用到修改display這個屬性,往往會在排版上造成一些影響,例如不該用flexbox 的地方如果用了flexbox,不該用table 的地方用了table,不該用inline-block 的地方用了inline-block,后續反而要多寫許多其他的定位樣式來進行修正,那就有點本末倒置了,因此如何活用這些CSS 垂直居中的方法,就要依據大家的版面結構進行靈活運用啰!^_^ 如果你有其他本文沒有提及到的垂直居中方法,歡迎到留言區進行分析喲。

          更多精彩內容,請關注“前端達人”公眾號

          論是做web前端還是手機端的前端頁面,我們經常會用到的就是圖片不規則,而我們又需要這個圖片在容器上以水平垂直居中顯示,如上圖。

          其實這個也很簡單,直接上我寫的樣式:

          CSS:

          <style type="text/css">

          .img-container{width: 100%; float: left}

          .img-container span{width:120px;height:120px;overflow:hidden;position:relative;text-align:center;vertical-align:middle; border:#ccc 1px solid; float: left; margin-left: 20px; padding:7px; display: block;}

          .img-container span a{position:absolute;top:50%; left: 50%; transform: translate(-50%, -50%);}

          .img-container span a img{max-width:120px;max-height:120px; }

          </style>


          代碼:

          <div class="img-container">

          <span>

          <a href=""><img src="https://img0.baidu.com/it/u=4137924777,4215971248&fm=26&fmt=auto&gp=0.jpg" alt=""></a>

          </span>

          <span>

          <a href=""><img src="https://img1.baidu.com/it/u=415185236,4221481113&fm=26&fmt=auto&gp=0.jpg" alt=""></a>

          </span>

          <span>

          <a href=""><img src="https://img2.baidu.com/it/u=1654250371,945534091&fm=11&fmt=auto&gp=0.jpg" alt=""></a>

          </span>

          </div>


          主站蜘蛛池模板: 国产精品视频一区二区三区经| 无码人妻一区二区三区在线 | 3d动漫精品啪啪一区二区免费| 日本一区高清视频| 无码精品人妻一区二区三区人妻斩| 日本精品3d动漫一区二区| 日韩一区二区a片免费观看| 精品深夜AV无码一区二区| 国产精品女同一区二区| 免费无码一区二区三区蜜桃| 青娱乐国产官网极品一区| 国产高清视频一区二区| 在线观看国产一区二区三区| 精品国产精品久久一区免费式| 国产福利一区二区三区在线视频| 久久国产精品视频一区| 国产在线视频一区二区三区98| 精品视频在线观看你懂的一区| 亚洲国产一区二区三区 | 精品国产AⅤ一区二区三区4区 | 精品一区二区三区在线视频| 插我一区二区在线观看| 中文字幕在线无码一区| 91国在线啪精品一区| 成人精品视频一区二区三区不卡| 波多野结衣高清一区二区三区| 中文无码AV一区二区三区| 精品福利一区二区三区| 最美女人体内射精一区二区| 日韩精品在线一区二区| 久久se精品一区二区国产| 亚洲高清美女一区二区三区| 亚洲综合色一区二区三区 | 99精品国产高清一区二区三区| 亚洲国产精品一区二区久久hs | 日韩一区二区三区无码影院 | 国产精品一区二区久久沈樵| 四虎永久在线精品免费一区二区| 国产一区二区三区夜色| 无码国产伦一区二区三区视频| 国产一区二区三区影院|