要設定內部盒子在外部盒子內垂直水平居中，可以有以下幾種做法：
假設外部盒子為紅色，大小為10em*10em；內部盒子為黃色，大小為3em*3em。在調整位置之前，盒子情況如下：
由於知道兩個盒子的大小，只要設定黃盒子的位置即可，首先設定黃盒子的position為absolute，再將黃盒子向右下方偏移紅盒子大小的一半，即向右偏移5em，向下偏移5em。此時盒子情況如下：
此時的黃盒還不在正中間，呼叫transform(-1.5em,-1.5em）將黃盒基於自身位置向左上偏移自身盒子大小的一半，效果如下：
這樣子黃盒子就在紅盒子的正中間，**如下：
.out
.in
.out
.in
當兩個盒子的大小都未知時，重新設定transform：translate(-50%,-50%），這段**使得黃盒子基於自身位置向左上方偏移自身寬高的一半。**如下：
.out
.in
將紅盒子設定成flex布局頁可以解決垂直水平居中的問題，只要將紅盒子的display設定成flex，之後設定justify-content為center，設定align-items為center。flex具有主軸和交叉軸，內部的專案在主軸上依次排列，justify-content定義了內部的專案在主軸上應該怎樣排列，當值為center代表專案在主軸上居中；align-items定義了內部的專案在交叉軸上的對齊方式，值為center時代表居中對齊。實現**如下：
.out
.in
盒子垂直水平居中
1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middle 子級 margin...
移動端水平垂直居中 盒子垂直水平居中方案
盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...
盒子水平垂直居中之 flex
父親 align items 在交叉軸上的如何對齊 flex start flex end center baseline stretch align content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。boxfelx 1 代表3項 flex grow 它指定了flex...