水平居中對齊：
1、文字內容居中
text-align: center;
2、塊級元素，且有固定寬度
margin: 0 auto;
3、塊級元素
width: 百分數;
margin-left: (1-百分數)/2;

垂直居中對齊
1、單行文字，設定行高等於所在區域的高度

height: 200px;
line-height: 200px;

2、多行文字居中

高度不固定時，高度只能通過內部文字來撐開

padding: 100px auto;

高度固定時

height: 300px;
display:table-cell;
vertical-align:middle;

水平垂直居中
1、利用絕對佈局absolute

    .father{
        position: relative;
    }
    .son{
        width: 300px;
        height: 100px;
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

2、為父元素使用流體佈局

display: flex;
justify-content: center;/*實現水平居中*/
align-items:center; /*實現垂直居中*/
 

3、利用css3中的translate屬性設定居中

	.father{
        position: relative;
 	  }
    .son{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%; 
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
	 }
 

4、子div垂直居中

    .father{
        position: relative;
 	  }
    .son{
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: width/2;
        top:50%;
        margin-top: height/2;
    }