CSS布局居中方法

水平居中对齐：
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;
    }

---