CSS实现元素居中的几种方法

1、基本

------------水平居中---------------
/*块级*/
margin:0 auto;		
/*行级、行内块级（给父元素添加）*/
text-align:center;	

------------垂直居中---------------
/*块级*/
padding:10px  0;	
/*行级、行内块级*/
line-height:/*行高法，取值应与父级同高*/
vertical-align:midden;/*作用环境：父元素有line-height，否则只有长度单位值有效*/

2、teble-cell布局

父元素{
　　display:table-cell;
　　vertical-align:middle;	/*子项垂直居中*/
　　text-align:center;		/*子项水平居中（块级子元素无效）*/
}

3、CSS3 flex布局

-----------------方式一--------------------
父元素{
	display:flex;
	align-items:center;		/*子项垂直居中*/
	justify-content:center;/*子项水平居中*/
}


-----------------方式二--------------------
父元素{
	display:flex;
}
子元素{
	margin:auto;	/*子项水平、垂直居中*/
}

4、position布局（元素宽高已知）

父元素{
　　position:relative;
}
子元素{
　　position:absolute;
	width：100px;
	height：50px；
	/*基本写法*/
　　top：50%；
　　left：50%;		/*距上、左占父级50%*/
    margin-top:-25px ;
　　margin-left:-50px;/*减去元素自身宽高一半*/
　　/*CSS3 calc简写(注意”-”左右空格)*/
	top:calc(50% - 25px);
	left:calc(50% - 50px);
}

5、position+CSS3transform布局（元素宽高未知）

父元素{
	position:relative;
}
子元素{
	position:absolute
	top:50%;
	left:50%;		/*距上、左占父级50%*/
	transform:translate(-50%,-50%);/*减去元素自身宽高一半*/
}