盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法： 首先，做一下基礎的布局：
定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多：
.container
.box
但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有了適用性更廣的方案：transform。
.container
.box
這種方法唯一的缺點是相容性，不過現在大多數專案都不用考慮相容性了（個人愚見）。 基於定位，還有一種利用margin:auto的方法:
.container
.box
這種方法的前提是子元素必須有寬高。
2. flexflex是我在專案中用的最頻繁的方法，逐漸取代了定位的方法，因為用起來太方便了，還不用考慮很多特殊情況，**量也少。
.container3. table 布局還有一種基本不用，但我在有些部落格中看到的方法，就是 table 布局
.container
.box
個人首推 flex 布局。
盒子垂直水平居中
1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...
盒子垂直水平居中
要設定內部盒子在外部盒子內垂直水平居中，可以有以下幾種做法 假設外部盒子為紅色，大小為10em 10em 內部盒子為黃色，大小為3em 3em。在調整位置之前，盒子情況如下 由於知道兩個盒子的大小，只要設定黃盒子的位置即可，首先設定黃盒子的position為absolute，再將黃盒子向右下方偏移紅...
居中 水平 垂直 水平垂直
將子元素的display設定為inline block，使子元素變成行內元素 這種方法的不足之處在於，子元素的text align繼承了父元素的center，文字也居中顯示，所以需要在子元素中設定text align left 思路二 在本身元素設定margin 0 auto實現塊級元素水平居中 若...