純CSS3有什麼實現垂直居中的新方法嗎？

---

Flexbox.

---

CSS3垂直居中很簡單，如下：

.item{
top: 50%;
position: absolute;
transform: translateY(-50%); /* 這裡我們使用css3的transform來達到類似效果 */
}


具體說明和講解，請參看這個ＣＳＳ居中完整手冊：網頁元素CSS居中實現完整攻略 極客標籤

---

對於 css3 的布局已經進化了很多了，在垂直布局方面，flex 已經很牛逼了。display:flex，具體的用法請看w3c文檔：CSS Flexible Box Layout Module

Demo：跨瀏覽器的 CSS flex by 一絲

---

parentElement{
display:flex;/*Flex布局*/
display: -webkit-flex; /* For Safari */
align-items:center;/*指定其下的Flex Item垂直居中*/
}


Demo: http://codepen.io/anon/pen/PZKZqe

---

#divWrap{

position:relative/absolute;

}

#divInner{

position:absolute;

top:50%;

height:200px;

margin-top:-100px;

}

如上方法也可以，並適用於垂直方向上的任意位置。（注: margin 設置成百分比，只有 Chrome 不是反人類，雖然不太符合標準）

至於文字，設置 line-height 即可。

---

# 垂直居中

1. 定位布局

**利用`relative`和`absolute`進行布局**

###style

2.css3屬性transform和定位進行布局

## 3.table table-cell布局

4.flex布局

前端垂直居中

---

有，用flexbox局部組件，不得不無恥的推薦下自己的粗糙翻譯。

Tab的前端路

當然還有Centering in CSS: A Complete Guide

---

推薦閱讀：