CSS 定位布局 - 绝对、固定定位设置居中悬浮div

仅供学习，转载请注明出处

讨论的问题

在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中，发现当使用定位布局的时候，存在一个无法使用margin居中的方法。

下面写一个示例重现一下问题，如下：

首先写一个使用margin:50px auto方式居中的div看看。

从上图可以看出使用margin:50px auto进行自动浏览器居中。

下面设置一下相对定位，看看会不会影响这种居中效果

从上图可以看出相对定位并不会影响margin居中布局。

设置一下绝对定位，看看会不会影响这种居中效果

可以从图中看出，绝对定位会影响margin的居中布局。

设置一下固定定位，看看会不会影响margin居中效果

固定定位也是会影响margin居中布局的，其实就是 margin-left: auto; 失效了。

好了，那么问题来了。这种情况下，该如何设置布局呢？

在绝对定位的情况下，设置div居中布局

居中布局当然就要先使用left偏移来进行设置，不过这次偏移需要用百分比，不然浏览器稍微缩放就无法居中了。

可以从上图看到left偏移了50%之后，div依然不是居中的，那么下一步该怎么办呢？

使用margin-left 向左偏移div自身宽度的一半，保证居中

使用绝对定位只是无法使用margin-left:auto而已，如果输入具体数值还是可以使用的。
下面来看看，这样写：

好了，从上面来看，绝对定位已经可以设置div居中了，那么固定定位是否也是如此呢？

固定定位设置div居中

固定定位从上图来看，也是可以通过这种方式来进行居中的，基本方法如下：

left: 50%
margin-left: 负自身宽度的一半

因为绝对定位和固定定位相对于文档流就是悬浮的，这种效果最适合用于制作页眉部分的固定栏目了。

---

2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送

寻找资源的地址如下：

扫描微信公众号

寻找价值数万的视频资源