## 使用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%; } ```