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

joyqi 發布于2019-08-29 11:04 / 2465人閱讀

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

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

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

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




    
    Document

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

思路2：絕對定位居中（改進版之一）

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

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

思路3：絕對定位居中（改進版之二）

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

（你可以在思路二的基礎上將inner寬度去掉，內部放一些文字，你會發現在第二種思路下這種需求是可以滿足的）

思路4：flex布局居中

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




    
    Document



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

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

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

云服務器 GPU云服務器水平垂直居中 html使文字垂直居中 js緩存的幾種方法最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111405.html

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

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

cheukyin 2019-08-30 11:18 評論0 收藏0
CSS居中總結大全

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

Cruise_Chan 2019-08-30 15:55 評論0 收藏0
web開發常用的幾種居中形式

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

zqhxuyuan 2019-08-21 16:23 評論0 收藏0
web開發常用的幾種居中形式

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

brianway 2019-08-29 13:23 評論0 收藏0
css水平垂直居中

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

jaysun 2019-08-29 12:39 評論0 收藏0