垂直居中和水平居中

*垂直居中

1、father{ display:table-cell; vertical-align:center; }

2、直接根据宽、高计算margin的大小

3、father{ position:relative; width:300px; height:300px; }

     child{width:200px; height:200px; position:absolute; margin-top:150px; top:-100px;}

 

*水平居中

1、margin:0 auto;

2、使用margin左右边距

3、把子盒子转换为行内块元素，父元素用text-align

4、father{ position:relative; width:300px; height:300px; }

     child{width:200px; height:200px; position:absolute; margin-left:150px; left:-100px;}