居中对齐的方法汇总

水平居中对齐：

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;
        }