大家好，今天要給大家分享的是CSS實現垂直居中的幾種方法，相信大家對元素的水平居中都非常了解了，如果是一個行内元素，就對它的父元素應用 “text-align:center”；如果是一個塊級元素，就對它自身應用“margin：auto”。但是要對一個元素進行垂直居中，你能想到哪些方法呢？下面我給大家介紹幾種基于不同場景實現元素垂直居中的方法，希望能對你有所幫助。

水平垂直居中

首先我們用一些基本的html和css得到下圖的效果，後面幾種居中方法都基于此。

1、絕對定位 固定寬高的垂直居中

div{ position: absolute; width: 18em; height: 6em; top: 50%; left: 50%; margin-top: -3em;/*高度的一半*/ margin-left: -9em;/*寬度的一半*/ }

原理：這種居中的方法本質上做了兩件事，一是先把需要居中的元素的左上角放在視口（或具有定位屬性的父元素）的正中心，然後再利用負外邊距把它向左、向上移動自身寬高的一半，從而使元素水平和垂直居中（如下圖所示）。

缺點：要求元素有固定的寬高，但很多情況下，居中元素的尺寸是由其内容來決定的。

那麼對于未知寬高的元素如何實現垂直居中呢？這時我們可能會想到用百分比來解析，但問題是，包括margin在内的很多CSS屬性，百分比都是以其父元素的尺寸為基準進行解析的。

2、絕對定位 自适應寬高的垂直居中

如果找到一個能以自身尺寸為基準進行解析的屬性對元素進行移動變換問題是不是就迎刃而解了呢？細心的同學會發現，CSS3為我們提供的2D轉換屬性中的translate屬性恰好是以元素自身尺寸為基準進行換算和移動的。

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

這樣是不是就可以擺脫對固定尺寸的依賴實現垂直居中了。

有些情況基于對整體布局的考慮不想使用絕對定位，這時我們任然可以采用translate（）技巧把元素以其自身寬高的一半為距離進行移動，隻是在沒有定位缺少left和top的情況下如何把元素的左上角放在容器的中心呢？如果隻是相對于視口進行居中，依然使用margin就可以解決，隻是需要使用一個很少見的單位 “vh”。

“vh” 是一個視口相關的長度單位，1vh表示視口高度的1%，50vh表示視口高度的一半，由此一個基于視口垂直居中的方法如下：

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

這種方法無需定位，可自适應高度，缺點就是隻适用于基于視口的垂直居中。

我認為這是最簡單也是最高效的方法，唯一需要注意的就是浏覽器的兼容問題，隻需要兩行代碼就可以搞定：

一是給待居中元素的父元素設置display：flex,再給自身設置 margin:auto即可。

body{ height: 100vh; display: flex; } div{ margin: auto; }

除此之外，給父元素指定一個固定尺寸，可借助 "align-items" 和 “justify-content" 屬性對其子元素進行垂直和水平居中，這種方法同時也适用于文本，自此就不用太過糾結line-height了。

div{ display: flex; align-items: center; justify-content:center; width: 20em; height:10em; }

上面的代碼随意改變div的寬高，裡面文本始終保持水平和垂直居中。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!