元素垂直水平居中几种方法

第一种：已知元素宽高，使元素水平居中

代码如下:

#test{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 0 auto;
				text-align: center;
				line-height: 200px;
				}

margin:0 auto    使元素水平居中，上下的外边距为0，左右外边距为auto，左右的外边距会平均分配。当上下的外边距设置为auto时，效果和当前效果一致。

第二种：已知元素高宽，使元素垂直水平居中

	
		
		
		
		
	
	
		

			

				test
			
		
	

让内部div相对于外部div进行定位，内部div的偏移量为外部div高宽的50%，然后再使内部div向内移动自身的一半。

元素的初始位置如图中1方块的位置， 当这时left和top各为50%时，内部div位于图中2方块的位置，设置margin为负数时，使内部div到达外部div的中间，图中3方块的位置。

第三种：已知元素高宽，使元素垂直水平居中

	
		
		
		
	
	
		

			

				testt
	
			
		
	

绝对定位盒子的特性

水平方向上：left+right+padding+width+margin = 包含块水平方向上padding区域的尺寸

垂直方向上：top+bottom+height+padding+margin = 包含块内垂直方向上padding区域的尺寸

当left、right、top、bottom、padding的值都为0，margin为auto时，可使得元素垂直水平居中

 

第四种：未知元素的高宽，是元素垂直水平居中

	
		
				
		
	
	
		

			
			

				testttestttestttestt
	
				testttestttestttestt
	
				testttestttestttestt
	
				testttestttestttestt
	
				testttestttestttestt
	
			
		
	

这种方法和第二种方法类似，使内部div相对于外部div进行定位，left和top值都为外部div的50%，然后通过transform: translate3d(-50%,-50%,0)方法，使元素在x和y中方向上向内移动自身大小的一半，z轴方向上不变。不过大部分浏览器不支持该方法。

 

第五种：使图片垂直水平居中，也适用于未知元素的垂直水平居中

先让body的高度变为100%，然后在body后添加伪类after，设置高度为100%，宽度为0，然后使添加的伪类水平居中，最后使图片的基线对准伪元素的基线即可。