浅谈margin:0 auto元素居中的问题

来源：互联网发布：仙鹤刺绣棒球服淘宝编辑：程序博客网时间：2024/06/03 17:52

今天整理了下元素居中的问题，和大家分享和交流一些心得

首先，需要居中的元素分为三类：

普通的div
浮动元素
设定了绝对定位的元素

关于普通的div的居中

这个相对来说是比较简单的，直接用margin:0 auto;

<html><head><style>div{width:100px;height:100px;background-color:yellow;margin:0 auto;}</style></head><body><div></div></body></html>

对于普通元素，像上面这样添加样式即可

关于浮动元素的居中问题

这个问题困扰了我很久，因为浮动元素不像普通的元素，margin的任何一个方向设置auto都会变得无效。这样一来，居中只能在给margin设置百分比或者固定值下手了。但是为什么auto值对浮动元素无效，百分比和固定值却有效呢？带着这个问题我翻查了css中关于margin的一些值的定义，如下图所示

这张图列出了auto，固定值，百分比是如何计算的。我们可以看到，固定值和百分比是有具体的计算方案的，而auto是浏览器自动去计算。所以，在这里浮动元素margin值设为auto无效。我认为是元素浮动之后脱离了文档流，浏览器找不到参照物去计算这个auto，所以就默认忽略掉了。

下面我们来看看如何居中浮动元素

<html><head><style>div{width:100px;height:100px;background-color:yellow;

float:left;position:relative;

margin-left:50%;

left:-50px;}</style></head><body><div></div></body></html>

我们给元素设置一个左外边距为50%，此时浮动元素的左边框刚好落在页面的中线上。但是我们要居中，是要将浮动元素的中轴落在页面的中线，因此我们只需将元素在左移一半宽度的距离就可以了，在这里我们用left:-?px实现，这个?是浮动元素宽度的一半，这里即为left:-50px;

最后，关于设置了绝对定位的元素的居中问题

我们先把外层的相对定位的大div用margin:0px auto;居中，然后再像上面的方案一样：设置margin-left为50%，再设置left的值即可

<html><head><style>#parent{width:300px;height:300px;background-color:yellow;position:relative;margin:0 auto;}#son{width:100px;height:100px;background-color:red;position:absolute;margin-top:50%;top:-50px;margin-left:50%;left:-50px;}</style></head><body><div id="parent"><div id="son"></div></div></body></html>

以上就是我对各种元素浮动的理解，本人小白，可能对“margin的auto值在浮动元素中失效”这个问题理解的不好，欢迎各路大神前来指正。

阅读全文

1 0