1、定位 盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
2、table-cell布局 父級 display: table-cell; vertical-align: middle; 子級 margin: 0 auto;
3、定位 + transform ; 適用於 子盒子 寬高不定時； （這裡是本人常用方法）
position: relative / absolute;
/*top和left偏移各為50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
transform: translate(-50%, -50%); 注意這裡啟動了3d硬體加速哦 會增加耗電量的 （至於何是3d加速 請看瀏覽器程序與執行緒篇）
4、flex 布局
父級：
/*flex 布局*/
display: flex;
/*實現垂直居中*/
align-items: center;
/*實現水平居中*/
justify-content: center;
再加一種水平方向上居中 ：margin-left : 50% ; transform: translatex(-50%);
盒子垂直水平居中
要設定內部盒子在外部盒子內垂直水平居中，可以有以下幾種做法 假設外部盒子為紅色，大小為10em 10em 內部盒子為黃色，大小為3em 3em。在調整位置之前，盒子情況如下 由於知道兩個盒子的大小，只要設定黃盒子的位置即可，首先設定黃盒子的position為absolute，再將黃盒子向右下方偏移紅...
移動端水平垂直居中 盒子垂直水平居中方案
盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...
盒子水平垂直居中之 flex
父親 align items 在交叉軸上的如何對齊 flex start flex end center baseline stretch align content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。boxfelx 1 代表3項 flex grow 它指定了flex...