元素居中显示（div等元素居中显示的方法）

方法一：

div{
	width: 200px;
	height: 200px;
	background: salmon;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	}

缺点：方式一不适合编码，因为需要我们自己口算元素宽度的一半是多少。

方法二：

div{
	width: 200px;
	height: 200px;
	background: salmon;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	}

缺点：方式二不利于兼容，因为transform属性是CSS3新增的，只有支持C3属性的浏览器才可以使用。

方法三：

在CSS3中新增了一个calc函数，可以简单实现+、-、*、/运算。

div{
	width: 200px;
	height: 200px;
	background: salmon;
	position: absolute;
	left: 50%;
	margin-left: calc(-200px / 2);;
	}

但缺点：同方法二transform一样，有兼容性问题

方法四：

以上方法都有弊端，但是less中的运算就没有弊端了。less使用方法

• less中的运算和CSS3中新增的calc函数一样，都支持：+、-、*、/
• 但在计算过程中要写清楚计算结果的单位，单位写在被除数或者两个都写都可以

div{
	width: 200px;
	height: 200px;
	background: salmon;
	position: absolute;
	left: 50%;
	margin-left: (-200px / 2);
	}