元素的水平垂直居中

1.行内元素水平居中

a.将行内元素包裹在块级元素中，然后设置：text-align:center

.box1 {
			background: #2b2b2b;
			margin: 0 auto;
			width: 100px;
			color: white;
			text-align: center;
		}

2.块级元素水平居中

块级元素的宽度一定，这就是我们平常所用的：margin: 0 auto。

但是当块级元素的宽度不定的时候，我们可以这样：让他display为inline类型，然后给父级标签设置text-align:center实现。当然了还有另外一种有趣的方法：给父级设置float属性，position:relative,left:50%;同时给子元素设置position:relative left:-50%.但是相对定位设置left后会在原地‘留坑’，酌情使用。

.box {
			float: left;
			position: relative;
			left: 50%;
		}
		.box1 {
			background:blue;
			font-size: 40px;
			color: white;
			position: relative;
			left: -50%;
		}

<div class="box">
		<div class="box1">1</div>
	</div>

3.水平排列的多个块级元素的水平居中

a.给子元素设置：display:inline-block，再给父级设置text-align:center即可。

.box {
			width: 400px;
			height: 200px;
			margin: 100px auto;
			border: 1px solid red;
			text-align: center;
			
		}
		.box1 {
			background:blue;
			width: 100px;
			height: 100px;
			line-height: 100px;
			font-size: 40px;
			color: white;
			display: inline-block;;
		}

<div class="box">
		<div class="box1">1</div>
		<div class="box1">2</div>
		<div class="box1">3</div>
	</div>

b.用弹性盒子实现flexbox .给元素父级设置：display:flex;justify-content:center  给子元素设置display:inline-flex;

.box {
			width: 400px;
			height: 200px;
			margin: 100px auto;
			border: 1px solid red;
			display: flex;
			justify-content: center;

			
		}
		.box1 {
			background:blue;
			display: inline-flex;
			width: 100px;
			height: 100px;
			line-height: 100px;
			font-size: 40px;
			color: white;
		}

<div class="box">
		<div class="box1">1</div>
		<div class="box1">2</div>
		<div class="box1">3</div>
	</div>

4.子元素的父元素高度不确定的垂直居中

这个时候只要给父元素设置相同的上下padding即可实现。

.box {
			width: 300px;
			border: 1px solid black;
			padding-top: 30px;
			padding-bottom: 30px;
			margin: 0 auto;
		}
		.box1 {
			background:orange;
			font-size: 40px;
			color: white;
			width: 100px;
			line-height: 100px;
			text-align: center;
		}

<div class="box">
		<div class="box1">1</div>
	</div>

5.子元素的父元素高度确定的垂直居中

a.如果是单行文本，设置line-height等于父元素高度即可。

b.如果是多行文本，图片，块级等元素的时候，高度又不确定，我们可以利用vertical-align：middle这个属性实现居中。但是这个vertical-align这个属性默认为父元素是td或者th等表单类的时候才生效。这个时候我们就要把父元素进行转化：display：table-cell(ie6、7不支持此属性)。大家可以试着居中一下图片。

.box {
			width: 300px;
			height: 300px;
			margin-left: 400px;
			border: 1px solid red;
			display: table-cell;
			vertical-align: middle;
		}
		.box1 {
			background:orange;
			font-size: 40px;
			color: white;
			width: 100px;
			text-align: center;
			margin: 0 auto;
		}

<div class="box">
		<div class="box1">1</div>
	</div>

6.已知宽高元素的水平垂直居中

a.父元素设置相对定位。子元素设置绝对定位。令子元素的top,left值都为50%，利用负的margin-left和负的margin-top值为其宽高的一半实现水平垂直居中。

.box {
			width: 300px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid red;
			position: relative;
		}
		.box1 {
			background:purple;
			font-size: 40px;
			color: white;
			text-align: center;
			line-height: 80px;
			width: 100px;
			height: 80px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -50px;
			margin-top: -40px;
		}

<div class="box">
		<div class="box1">1</div>
	</div>

b.设置父元素相对定位，设置子元素的margin为auto，并令其left.top,bottom.right值都为0.仍然可以实现上述效果。

.box {
			width: 300px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid red;
			position: relative;
		}
		.box1 {
			background:#2b2b2b;
			font-size: 40px;
			color: white;
			text-align: center;
			line-height: 80px;
			width: 100px;
			height: 80px;
			margin: auto;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}

<div class="box">
		<div class="box1">1</div>
	</div>

总结：如果还有更好的方法，本人会继续补充说明。