css实现盒子水平居中

展示4种，有两个元素，父盒子和子盒子。
div:

<div class="m1">
			<div class="m2"></div>
</div>

• 1、使用margin: 0 auto;

.m1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			.m2{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
				margin: 0 auto;
	}

• 2、使用margin左右边距计算用margin-left：宽度固定；

.m1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				
			}
			.m2{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
				margin-left: 49px;
	}

• 3、先让盒子左右边缘和父盒子垂直的中心边缘重叠，再往回走自己宽度的一半。

.m1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				 position: relative;
			}
			.m2{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
				position: absolute;
				margin-left: 150px;
				left: -101px;
}

• 4、把子盒子转换成行内块，然后父盒子使用text-align：center；宽度不确定块状元素水平居中——把块状元素改为inline行内元素（也可以改成inline-block行内块级元素），然后给父元素加上text-align:center来实现水平居中。

.m1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				text-align: center;
			}
			.m2{
				width: 200px;
				height: 200px;
				border: 1px solid blue;
				display: inline-block;
}

比较全的链接