如何讓一個div裡面的div垂直居中？

如何讓上麵灰色有文字那個div和背景圖標垂直居中，不管屏幕大小有好大，始終在垂直方向上的中間。上面有整個布局和樣式表，謝謝高手指點

---

CSS3時代當然要用CSS3的完美解決辦法。不能忍受以前的height和line-height同高等等的解決方法，想想都覺得不優雅。

用CSS3中的flexbox 布局模式：

.vertical-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}


CSS里總算是有了一種簡單的垂直居中布局的方法了！

參考自：CSS - flexbox

---

#main {
display: flex;
}

#main div {
margin:auto;
}


---

目前只有水平居中的方法 使用 text-align=center

要想垂直居中只能使用margin-top:n%; 來實現，需要一點點的演算法，計算自己內容的高度，

先計算整個內容 容器的高度，在計算自己內容的高度，算出自己內容的高度占整個容器高度的百分比 100%減去自己內容高度的百分比 除以2 得出的百分比就是 margin-top:百分比的數值。

---

瀏覽器兼容性不同，所以處理辦法也不同。你可以看看：div垂直居中 - 笑紅塵的博客 - 博客頻道 - CSDN.NET。這裡針對新、老瀏覽器中的div垂直居中都做了講解。

---

我想舉報你「代為完成的個人任務」。

lmgtfy：http://blog.segmentfault.com/humphry/1190000000381042

---

推薦閱讀：