今天整理了下元素居中的问题，和大家分享和交流一些心得
首先，需要居中的元素分为三类：
1.普通的div
浮动元素
设定了绝对定位的元素
关于普通的div的居中
这个相对来说是比较简单的，直接用margin:0 auto;
div{
width:100px;
height:100px;
background-color:yellow;
margin:0 auto;
}
对于普通元素，像上面这样添加样式即可
关于浮动元素的居中问题
这个问题困扰了我很久，因为浮动元素不像普通的元素，margin的任何一个方向设置auto都会变得无效。这样一来，居中只能在给margin设置百分比或者固定值下手了。但是为什么auto值对浮动元素无效，百分比和固定值却有效呢？带着这个问题我翻查了css中关于margin的一些值的定义，如下图所示
这张图列出了auto，固定值，百分比是如何计算的。我们可以看到，固定值和百分比是有具体的计算方案的，而auto是浏览器自动去计算。所以，在这里浮动元素margin值设为auto无效。我认为是元素浮动之后脱离了文档流，浏览器找不到参照物去计算这个auto，所以就默认忽略掉了。
2.下面我们来看看如何居中浮动元素
div{
width:100px;
height:100px;
background-color:yellow;
float:left;
position:relative;
margin-left:50%;
left:-50px;
}
我们给元素设置一个左外边距为50%，此时浮动元素的左边框刚好落在页面的中线上。但是我们要居中，是要将浮动元素的中轴落在页面的中线，因此我们只需将元素在左移一半宽度的距离就可以了，在这里我们用left:-?px实现，这个?是浮动元素宽度的一半，这里即为left:-50px;
3.最后，关于设置了绝对定位的元素的居中问题我们先把外层的相对定位的大div用margin:0px auto;居中，然后再像上面的方案一样：设置margin-left为50%，再设置left的值即可
以上就是我对各种元素浮动的理解，本人小白，可能对“margin的auto值在浮动元素中失效”这个问题理解的不好，欢迎各路大神前来指正。