## 使用css方法父盒子設置 ``` .father{ 父元素 background-color:#222; width: 600px; height: 600px; display: table-cell; 此元素會作為一個表格單元格顯示（類似 <td> </th>) text-align: center; vertical-align:middle; 設置元素的垂直對齊方式，middle指將此元素放在父元素中部 } .son{ background-color:#555; width: 300px; height: 300px; display: inline-block; 準換為行內快元素 vertical-align: middle; } ``` ## 使用css3的transform 原理，向將子元素相對于夫元素進移動，然后將元素相對于自己進行移動。 那左上角來看，假如一個夫元素（10,8），子元素（6,4）從左上角來看，先變為5,4然后變為（2,2） ``` .father{ background-color:#222; width: 600px; height: 600px; position: relative; /*規定元素的定位類型，生成相對定位的元素（子絕父相）,相對于其正常位置進行的定位*/ } .son{ background-color:#555; width: 300px; height: 300px; transform: translate(-50%,-50%); /*css3屬性，向屬性應用2d或3d轉換，該屬性允許我們對元素進行旋轉，縮放，移動或傾斜。translate(x,y),將元素相對于自己的長和寬進行相應的移動*/ position: absolute; /*生成絕對定位，生成相對于static定位的第一個元素進行定位*/ top: 50%; left: 50%; } ```