成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使一個div垂直+水平居中的幾種方法

joyqi / 2491人閱讀

摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對定位，內(nèi)

前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題：

思路1：絕對定位居中（原始版）

這個是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層div相對定位，內(nèi)層div絕對定位，top、left分別設(shè)為50%，然后通過設(shè)置margin-top、margin-left值為寬度的負(fù)數(shù)就可以成功實現(xiàn)垂直水平居中了：




    
    Document

很常見的，這個經(jīng)典的方法最大的不足之處是inner的寬度必須是固定值，否則margin-top和margin-left的值將無法設(shè)置，為了解決這個問題，我們考慮將使inner發(fā)生位移的代碼由margin-top、margin-left換成其他形式，換成什么呢？請看第二種方法：

思路2：絕對定位居中（改進(jìn)版之一）

我們的目的是讓inner在top和left方向發(fā)生50%偏移之后，再往回偏移一定距離，而css里關(guān)于位置偏移的屬性還有什么呢？當(dāng)我們查閱最新版的css3屬性之后，發(fā)現(xiàn)這樣一個屬性：selector{transform：translate();},translate代表著水平、垂直方向上的轉(zhuǎn)換（位移），其中當(dāng)括號內(nèi)的值設(shè)為百分比時，將以元素自身寬度為基準(zhǔn)，移位相應(yīng)的寬度，這樣一來，我們的問題就得到了解決：

這個方法妥善解決了內(nèi)層div寬度不確定的問題，但由于使用了css3的新屬性，在低版本ie瀏覽器下是不兼容的。由此，我們想到了第三種方法：

思路3：絕對定位居中（改進(jìn)版之二）

這個方法，不僅能在inner寬度不確定時發(fā)揮作用，還能兼容各種主流瀏覽器，看上去似乎很完美，但事實上，當(dāng)我們的需求改為：寬度隨內(nèi)部文字自適應(yīng) ，即寬度未設(shè)置時，這種方法就無法滿足需求了，原因是left、right設(shè)為0后，inner在寬度未設(shè)置時將占滿父元素的寬度。

（你可以在思路二的基礎(chǔ)上將inner寬度去掉，內(nèi)部放一些文字，你會發(fā)現(xiàn)在第二種思路下這種需求是可以滿足的）

思路4：flex布局居中

flex布局是移動端一種很新潮的布局方法，利用flex布局使元素垂直水平居中，缺點依然是令人頭疼的兼容性問題（在ie11-中不起作用），優(yōu)點是代碼量比前幾種方法相比略少，方便使用。
讓我們一起來了解一下：




    
    Document



    

        
這是一段文字這是一段文字這是一段文字

以上就是使div垂直+水平居中的四種方式，關(guān)于第三種思路中inner無法對內(nèi)容自適應(yīng)的問題，目前我還沒有想出解決辦法，希望高人們能夠指點一二。

參考文章:小tip: margin:auto實現(xiàn)絕對定位元素的水平垂直居中--來自張鑫旭-鑫空間-鑫生活

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111405.html

相關(guān)文章

  • (面試題)垂直居中的幾種實現(xiàn)方式

    摘要：尤其是在實際頁面中，有很多特殊的場景，導(dǎo)致水平居中實現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個的在一個水平垂直居中，用實現(xiàn)。首先定義元素層和垂直居中無關(guān)的樣式直接定義在里。 相比較水平居中，垂直居中比較復(fù)雜點。尤其是在實際頁面中，有很多特殊的場景，導(dǎo)致水平居中實現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例：一個200*2...

    cheukyin 評論0 收藏0

  • CSS居中總結(jié)大全

    摘要：中居中的幾種方式水平居中塊級元素在塊級元素中居中設(shè)置在子元素上，前提是不受影響只對行級元素有用行級元素設(shè)置浮動，或者設(shè)置定位之后。 CSS中居中的幾種方式 1.水平居中margin：0 auto；塊級元素在塊級元素中居中設(shè)置在子元素上，前提是不受float影響 2.text-align只對行級元素有用,行級元素設(shè)置浮動，或者設(shè)置定位之后。給它的父元素設(shè)置text-aglin：cente...

    Cruise_Chan 評論0 收藏0

  • web開發(fā)常用的幾種居中形式

    摘要：一水平居中二水平垂直居中三針對文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。 一 水平居中二 水平垂直居中三 針對文本內(nèi)容的垂直居中 一 水平居中 要居中的元素A有width屬性 給元素A添加 margin：0,auto；(代碼演示) showImg(h...

    zqhxuyuan 評論0 收藏0

  • web開發(fā)常用的幾種居中形式

    摘要：一水平居中二水平垂直居中三針對文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。 一 水平居中二 水平垂直居中三 針對文本內(nèi)容的垂直居中 一 水平居中 要居中的元素A有width屬性 給元素A添加 margin：0,auto；(代碼演示) showImg(h...

    brianway 評論0 收藏0

  • css水平垂直居中

    摘要：要讓下圖中綠色框水平垂直居中，你是怎么實現(xiàn)的，可能每個人都有自己習(xí)慣的使用方法。把元素設(shè)為方法在父元素中設(shè)置和然后設(shè)置垂直對齊方式為居中就可以適合父元素高固定的，畢竟要設(shè)置行高。本篇博客首發(fā)于本人博客水平垂直居中 要讓下圖中綠色框水平垂直居中，你是怎么實現(xiàn)的，可能每個人都有自己習(xí)慣的使用方法。下面是我總結(jié)的幾種方法廢話不多說，直接上菜。showImg(http://ooa3lxrpg....

    jaysun 評論0 收藏0

發(fā)表評論

0條評論

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