元素水平垂直居中

在前端写页面的时候经常能碰到需要对一个元素进行水平、垂直或者水平垂直居中。

1、通过margin值水平居中

	<head>
	<meta charset="utf-8">
	<title>centerAndMiddle</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 90%;
			height: 400px;
			border: 1px solid red;
		}
		#testOne{
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="testOne">
	</div>
</body>
</html>

水平居中

margin: 0 auto;

垂直居中

margin: *px auto; *的值为(父元素高度 - 元素高度) / 2;

对于一个div元素来说，通过设置margin: 0 auto;来进行水平居中，也是最常用的一种。但是当是定位元素或者是display改变元素属性时，对某些属性可以，如下： display: inherit、block、table、flex、-webkit-box、flow-root、grid、list-item; position: relative、static; 对其余的display属性不生效、定位元素属性常用的fixed和absolute也不生效。 PS：垂直居中的时候需要知道父元素的高度值。

2、定位元素通过left和margin值居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>centerAndMiddle</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 800px;
			height: 400px;
			border: 1px solid red;
		}
		#testTwo{
			position: absolute;
			left: 50%;
			margin-left: -400px;
			display: none; 
		}
	</style>
</head>
<body>
	<div id="testTwo">
	</div>
</body>
</html>

水平居中

如上面代码所示：当元素定位属性时，设置left: 50%;然后设置margin-left: -元素宽度的一半;(前面要加负号-)。就会在父元素里面水平居中，父元素要设置relative属性，不然会以最近的relative属性或者body来设置了。

垂直居中

设置top: 50%;属性，然后设置margin-top: -元素的高度的一半; PS：需要知道自身元素的宽高值。

3、定位元素通过left和transform属性居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>centerAndMiddle</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 90%;
			height: 400px;
			border: 1px solid red;
		}
		#testThr{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	</style>
</head>
<body>
	<div id="testThr">
	</div>
</body>
</html>

水平居中

定位元素设置left: 50%;然后设置transform: translateX(-50%);属性来水平居中。

垂直居中

定位元素设置top: 50%;然后设置transform: translateY(-50%);属性来水平居中。

可以设置 transform: translateX(-50%) translateY(-50%);保持水平垂直居中； PS：这个不用计算父元素宽高和自身元素的宽高，但是 transform属性需要写兼容 。

4、图片水平垂直居中

水平居中

图片元素是行内块元素（inline-block），所以不改变属性的时候水平居中，可以设置父元素的text-align: center;属性来让水平居中。但是一班图片不改变display的时候会有3px的边距，一般会改成display: block;这时候就可以用 上面的方法 使图片水平居中了。

垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>centerAndMiddle</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 900px;
			height: 600px;
			border: 1px solid red;
		}
		#imgTest{
			line-height: 600px;
			text-align: center;
		}
		#imgTest img{
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div id="imgTest">
		<img src="./images/jd914.png" alt="">
		<i></i>
	</div>
</body>
</html>

父元素设置行高line-height: 父元素高度，加一个标签，图片设置vertical-align: middle;属性。 ps : 如果父元素高度和图片差不多而且有需要文字配合：例如：在这里插入图片描述因为图片是行内块元素，会有3px的间距，看着会感觉不是垂直居中的，但是不能设置display: block;属性，此时可以对图片设置mrgin-top值即可。