居中总结（上）

块级元素居中

1. 块级设置宽度，margin：0 auto;
2. 计算margin值,计算margin-top,left,right,bottom
3. 外层宽度撑满屏幕，设置text-align:center;内层设置display:inline-block;

   ul {position: absolute;left: 0;right: 0;bottom:-30px;text-align: center;}
   ul   li {
   			border-radius:50% ;width: 20px;height: 20px;background: white;display: inline-block;
   			box-shadow: 0 0 4px rgba(25,25,25,0.8);cursor:pointer;
   			}
   

浮动后居中

1. 用position: absolute;text-align:center;

2. 多个li浮动后内层元素叠到一起：外层li:position：relative；内层设置position：absolute; top:0;left:0;right:0;bottom:0;margin:0 auto;

	#content >ul  li{position: relative;}
	#content >ul li > section{width: 1100px;height: 520px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:0 auto;}

3. 如果有width，把left和right设置为相同的值，只要相同，margin：0 auto；只要左右距离相等，剩余距离浏览器会计算。浏览器计算auto会优先计算平分，如果没有width，内容多宽就多宽，元素会被拉伸到设置的值（如left:10px;right:20px;)