css 垂直居中

我們知道在css中有元素的水平、垂直居中，而對元素水平居中是很簡單的：

如果是行內元素，則對它的父元素採用text-algin：center；如果是乙個塊級元素則採用margin： auto。

但是提到元素的垂直居中，情況並不是這麼良好。特別是在元素尺寸不固定的時候，更難處理。

對於垂直居中我們該怎麼辦？

漂亮的垂直居中

上面的垂直居中方法，要求元素要有固定的寬度和高度。原理就是把設定絕對定位，讓元素的左上角（top、left）放置在視口（具有定位屬性的祖先元素）的正中心。

然後利用負的外邊距把它向左，向上移動（移動距離相當於自身寬高的一半），最後的效果就是把自身的正中心放置在視口的正中心。

利用強大的calc()函式，上面的**還可以簡寫成：

position: absolute;

top: calc(50% - 20px);//"-"前後有空格，為了相容
left: calc( 50% - 40px); 
width: 80px;height: 40px;

這個方法的最大侷限性是，它要求元素的寬高是固定的。但是通常我們的尺寸是根據內容自身來決定的，有人想到用百分比值，但是通常屬性（包括margin）的百分比值都是以父元素的尺寸為基準進行解析的。

有沒有乙個屬性它是以自身的寬高作為解析基準呢？有！

css3的變形屬性中的translate（）移動函式可以做到這一點。

我們知道：translate(x,y)表示水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）。在它的函式裡使用百分比值是以這個元素的自身寬高為基準進行解析的。

所以，採用百分比的css變形對元素進行偏移，就不要考慮元素固定打尺寸大小了。不過有些瀏覽器對css3變形還不是充分支援。

position: absolute;

top: 50% ;
left: 50%;
-webkit-transform: translate(-50%,-50%);

最佳解決方案就是伸縮盒flexbox。

首先可以給父元素設定display：flex，再給元素自身設定margin：auto。這裡的margin不僅在水平方向上將元素居中，垂直方向上也是一樣。

採用display: flex;

justify-content: center;

align-items: center;

也可以讓內部文字居中。

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

css 垂直居中

先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...