块元素水平垂直居中方法汇总

无论在平时项目中还是在面试中，遇到块元素水平垂直居中的需求比较多。在此做下汇总：

一、块元素宽高固定

方法1、最普通常用方法

#target{
	width:100px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-100/2;
	margin-top:-100/2;
}

方法2、利用盒模型特性，当absolute定位元素偏移（top/lelft/right/bottom）与其他属性冲突时，则忽略偏移以其他属性值为准。

#target{
	width:100px;
	height:100px;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
}

方法3、利用css3属性calc，兼容不好

#target{
	width:100px;
	height:100px;
	position:absolute;
	top:calc(50%-100/2);
	left:calc(50%-100/2);
}

二、块元素宽高不定

方法1、利用transform:translate(-50%,-50%)，translate位移为百分比时是相对于元素自身的位移，而不是相对于包含块。注意加上各浏览器前缀以保持各浏览器兼容。

#target{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
}

方法2、弹性框布局，弹性框元素可以使子元素在其中垂直居中对齐（控制目标元素的父元素，使目标元素在父元素中居中）。display:flex是新版弹性框属性，旧版浏览器不识别，结合旧版属性display:box实现跨浏览器兼容。

#target-patent{
	display:flex;
	justify-content:center;
	align-items:center;
}