欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css讓容器水平垂直居中的7種方式

  發(fā)布時(shí)間：2016-10-17 16:20:22   作者：佚名   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

這種css布局平時(shí)用的比較多，也是面試題常出的一個(gè)題，網(wǎng)上一搜一大丟，不過還是想自己總結(jié)一下。
這種方法比較多，本文只總結(jié)其中的幾種，以便加深印象。
效果圖都為這個(gè)：

方法一：position加margin

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="wrap">  
  2.     <div class="center"></div>  
  3. </div>  
  4.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /**css**/ .wrap { width: 200px; height: 200px; background: yellow; position: relative;   
  2. } .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; rightright: 0; top: 0; bottombottom: 0;   
  3. }  

兼容性：主流瀏覽器均支持，IE6不支持

方法二：diaplay:table-cell

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.      <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*css*/ .wrap{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center;   
  2. } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green;   
  3. }   
  4.   

兼容性：由于display:table-cell的原因，IE67不兼容

方法三：position加 transform

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { position: relative; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px;   
  2. }   
  3.   

兼容性：ie9以下不支持 transform，手機(jī)端表現(xiàn)的比較好。

方法四：flex;align-items: center;justify-content: center

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;   
  2. } .center { background: green; width: 100px; height: 100px;   
  3. }   
  4.   

移動(dòng)端首選

方法五：display:flex;margin:auto

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex;    
  2. } .center { background: green; width: 100px; height: 100px; margin: auto;   
  3. }   
  4.   

移動(dòng)端首選

方法六：純position

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;   
  2. } /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;    
  3.      
  4. } /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;   
  5. }   
  6.   

兼容性：適用于所有瀏覽器

方法六中的方法一計(jì)算公式如下：
子元素（conter）的left值計(jì)算公式：left=(父元素的寬 - 子元素的寬 ) / 2=(200-100) / 2=50px;
子元素（conter）的top值計(jì)算公式：top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;
方法二計(jì)算公式：
left值固定為50%;
子元素的margin-left= -（子元素的寬/2）=-100/2= -50px;
top值也一樣，固定為50%
子元素的margin-top= -（子元素的高/2）=-100/2= -50px;

方法七：兼容低版本瀏覽器，不固定寬高

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="table">  
  3.     <div class="tableCell">  
  4.         <div class="content">不固定寬高，自適應(yīng)</div>  
  5.     </div>  
  6. </div>  
  7.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*css*/ .table { height: 200px;/*高度值不能少*/ width: 200px;/*寬度值不能少*/ display: table; position: relative; float:left; background: yellow;   
  2. } .tableCell { display: table-cell; vertical-align: middle; text-align: center;           
  3.     *position: absolute; padding: 10px;   
  4.     *top: 50%;   
  5.     *left: 50%;   
  6. } .content {   
  7.     *position:relative;   
  8.     *top: -50%;   
  9.     *left: -50%; background: green;   
  10. }   
  11.   

暫時(shí)總結(jié)上面的七種，這種方法太多，其實(shí)只要習(xí)慣了其中的一兩種也就夠用了。

總結(jié)

如果是移動(dòng)端，那么用方法四和方法五是比較方便的。而且支持不固定寬高的情況，快、準(zhǔn)、狠
也就是用 flex; align-items: center; justify-content: center;

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;   
  2. } .center { background: green; width: 100px; height: 100px;   
  3. }   
  4.   

或者display:flex;margin:auto;

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex;   
  2. } .center { background: green; width: 100px; height: 100px; margin: auto;   
  3. }   
  4.   

如果是PC端，要考慮兼容性的話。方法六是不錯(cuò)滴，也就是純position。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;   
  2. } /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;     
  3.      
  4. } /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;   
  5. }   
  6.   

如果PC端的中間的元素高度不固定，那么就用方法七即可，代碼就不復(fù)制了。

這種css元素垂直的如果真的要總結(jié)起來，應(yīng)該有十幾二十幾種。不過也沒必要全部掌握吧，只要大概了解一些，用起來沒有副作用就行。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺析CSS3 中的 transition，transform，translate之間區(qū)別和作用

    這篇文章主要介紹了CSS3 中的 transition，transform，translate之間區(qū)別和作用，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下
    2020-03-26

  • css3 中translate和transition的使用方法

    這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-26

  • CSS3 translate導(dǎo)致字體模糊的實(shí)例代碼

    這篇文章主要介紹了CSS3 translate導(dǎo)致字體模糊的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2019-08-30

  • 利用css3 translate完美實(shí)現(xiàn)表頭固定效果

    這篇文章主要介紹了利用css3 translate完美實(shí)現(xiàn)表頭固定效果的相關(guān)資料，文中通過示例代碼介紹的很詳細(xì)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
    2017-02-28

  • CSS3 3D位移translate效果實(shí)例介紹

    這篇文章主要為大家詳細(xì)介紹了CSS3 3D 位移translate效果實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-05-03

  • CSS3實(shí)現(xiàn)水平居中、垂直居中、水平垂直居中的實(shí)例代碼

    在前端面試中經(jīng)常會(huì)遇到css居中效果的實(shí)現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實(shí)例代碼給大家講解，需要的朋友參考下吧
    2020-02-27

  • css常用元素水平垂直居中方案

    這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2019-08-09

  • CSS水平垂直居中解決方案(6種)

    這篇文章主要介紹了CSS水平垂直居中解決方案(6種)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-02-10

  • css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解

    這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來
    2017-04-23

  • CSS水平垂直居中的幾種方法總結(jié)

    這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。
    2016-12-19

最新評(píng)論