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

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

代码如下:

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--已知高宽的元素水平居中的方案-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				width: 400px;
				height: 600px;
				background: pink;	
				margin: 0 auto;
			}
			#test{
				position: absolute;
				left: 50%;
				top: 50%;
				width: 100px;
				height: 100px;
				margin-left: -50px;
				margin-top: -50px;
				background: deeppink;	
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="test">
				test
			</div>
		</div>
	</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				background: pink;	
				width: 400px;
				height: 600px;
				margin: 0 auto;
			}
			#test{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				background: deeppink;	
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="test">
				testt<br />	
			</div>
		</div>
	</body>
</html>

绝对定位盒子的特性

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			#wrap{
				position: relative;
				background: pink;	
				width: 400px;
				height: 600px;
				margin: 0 auto;
				
			}
			
			#test{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				background: deeppink;	
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			
			<div id="test">
				testttestttestttestt<br />	
				testttestttestttestt<br />	
				testttestttestttestt<br />	
				testttestttestttestt<br />	
				testttestttestttestt<br />	
			</div>
		</div>
	</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            height: 100%;
        }

        body{
            text-align: center;
        }
        body::after{
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="img/1.jpg">
</body>
</html>

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