從頭開始 — CSS — 垂直居中

wuaiqiu 發布于2019-08-30 14:13 / 648人閱讀

摘要：基于特有的屬性擁有內聯元素的特性同時可以定義寬高，我們可以設置一個行內塊用于定義高度，再讓其他內聯元素與其對齊，實現垂直居中。如果居中的元素超過了視窗會被裁剪掉。使用時，不僅在水平方向上將元素居中，垂直方向上也是如此。

事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現起來很費勁，尤其是涉及尺寸不固定的元素。

本篇文章將介紹比較流行的幾種方法。

行內塊


    
    
        hello

 #ghost {
            display: inline-block;
            height: 20em;
            vertical-align: middle;
        }

本質上是利用了內聯元素的 vertical-align 屬性，通過將此屬性置為middle，同一行內的內聯元素都將以設置這一屬性的內聯元素的基線對齊。

基于inline-block特有的屬性：擁有內聯元素的特性同時可以定義寬高，我們可以設置一個ghost行內塊用于定義高度，再讓其他內聯元素與其對齊，實現垂直居中。

當然我們也可以將其它元素置為行內塊，再設置寬度并添加text-align使其水平居中。

總結一下，此方法太過hack。

絕對定位 子元素固定寬高


        
            hello

#main {
            background-color: green;
            height: 20em;
            width: 20em;
            position: relative;
}

#child {
            position: absolute;
            background: yellow;
            top: 50%;
            left: 50%;
            height: 10em;
            width: 10em;
            margin-top: -5em;
            margin-left: -5em;
}

顯然，這種方法的原理是：先利用絕對定位將這個元素的左上角放置與父元素的正中間，再利用負邊距將它向左上移動它本身的一半。

如果借助calc()函數可以說明得更加清楚：

#child {
    position: absolute;
    top: calc(50%-5em);
    left: calc(50%-5em);
    height: 10em;
    width: 10em;
}

不固定寬高

實際中大多數時候我們并不知道子元素的實際寬高。

如果你屬性translate()函數，你一定知道當它的參數為百分比時，它會按照元素本身的百分比值進行變換，我們可以通過這個方法徹底擺脫對尺寸的依賴！

#child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

看起來已經完美解決了，但是它還有以下的缺陷：

絕對定位會對整體的布局造成很強烈的影響。

如果居中的元素超過了視窗會被裁剪掉。

在某些瀏覽器中，元素可能會被放置在半個像素上造成模糊。

視口居中

如果我們不采用絕對定位，對子元素設置margin使其左上角置于父元素中點，再用translate重復上一種方法的操作，是否可以實現呢？

答案是不可以，因為margin的百分比是以父元素的寬度為基準的，即便是top和bottom也是！沒錯，很扯。

如果僅僅想要垂直于視口，我們可以采用css中相對于視口的單位 vw、vh、vmin、vmax

1vw 表示視口寬度的1%，同理1vh等于視口高度的1%

當視口寬度小于高度時，1vmin=1vw，否則1vmin=1vh，另一種情況同理。

#child {
            margin:50vh auto 0;
            transform: translateY(-50%);
}

它只能基于視口居中。

Flexbox

flex當然是未來的趨勢，上面的一切都可以理解成為了照顧老舊的瀏覽器的猴戲（雖然translate和視口單位的兼容性也不怎么好）。


    hello

#main {
           margin: auto;
        }
 body {
            display: flex;  
        }

啊，很難受。使用flexbox時，margin：auto不僅在水平方向上將元素居中，垂直方向上也是如此。

如果你熟悉flex的話，其實還有多種實現方式。

body {
            display: flex;  
            justify-content: center;
            align-items:center;
        }

或者對子元素多帶帶設置交叉軸對齊方式：

body {
            display: flex;  
            justify-content: center;
        }
#main {
            align-self:center;
}

云服務器 GPU云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

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

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

從頭開始 — CSS — 垂直居中

摘要：基于特有的屬性擁有內聯元素的特性同時可以定義寬高，我們可以設置一個行內塊用于定義高度，再讓其他內聯元素與其對齊，實現垂直居中。如果居中的元素超過了視窗會被裁剪掉。使用時，不僅在水平方向上將元素居中，垂直方向上也是如此。事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現起來很費勁，尤其是涉及尺寸不固定的元素。本篇文章將介紹比較流行的幾種方法。行內塊...

NoraXie 2019-08-01 18:43 評論0 收藏0
初探flex布局

摘要：一布局概述布局是一種較新盒子模型，在布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據容器的大小自動擴展或收縮其大小。下面我們來看用布局怎么解決這些問題。所以學會使用布局是非常有必要的。想詳細了解布局請點擊這里。一 flex布局 1.1 flex概述 flex布局是一種較新CSS盒子模型，在flex布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據容器的大小自動擴展或收縮...

Jeffrrey 2019-08-29 12:48 評論0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同時實現水平和垂直居中。博客原文地址：Claiyre的個人博客 https://claiyre.github.io/如需轉載，請在文章開頭注明原文地址不為繁華易匠心從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為...

hiyayiji 2019-08-29 12:29 評論0 收藏0
20170808- css 居中

摘要：擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它注意上面的例子中必須為元素設置寬度，并且寬度必須小于父容器的寬度絕對定位實現垂直居中或者自身高度的一半水平居中行內或類行內元素水平居中在塊級父容器中設置text-align:center 塊級元素水平居中塊級元素設置margin-left和margin-right為auto（前提是已經為元素設置了width） fl...

Dongjie_Liu 2019-08-29 13:07 評論0 收藏0