盒子在視窗垂直水平居中有七種方法：
第一種：利用負的margin來進行居中，需要知道固定寬高，限制比較大。
body>div:nth-of-type(1)
body>div:nth-of-type(1)div
第二種：利用絕對定位居中，非常常用的一種方法。body>div:nth-of-type(2)
body>div:nth-of-type(2) div
第三種：使用flex布局（.min寬高可不固定）
body>div:nth-of-type(3)
body>div:nth-of-type(3) div
第四種：flex居中(演示)。css3中引入的新布局方式，比較好用。缺點：ie9以及ie9一下不相容。
body>div:nth-of-type(4)
body>div:nth-of-type(4) div
第五種：利用table-cell來控制垂直居中。
body>div:nth-of-type(5)
body>div:nth-of-type(5) div
第六種：利用空盒子做外容器，裡邊的塊元素會自動垂直居中，只需要控制一下水平居中就可以達到效果。
body>div:nth-of-type(6)
body>div:nth-of-type(6) div
body>div:nth-of-type(6) span
第七種：這種方法靈活運用css中transform屬性，較為新奇。缺點是ie9下不相容。
body>div:nth-of-type(7)
body>div:nth-of-type(7) div
這七種是我們經常可以遇到的例子，大家可以在今後的工作學習中熟練並且掌握，可以很好的解決現實中遇到的某些實際問題。
CSS水平居中和垂直居中解決方案
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...
移動端水平垂直居中 盒子垂直水平居中方案
盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...
盒子垂直水平居中
1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...