首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS 定位布局 - 绝对、固定定位设置居中悬浮div

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

作者头像
Devops海洋的渔夫
发布2019-05-31 16:34:11
发布2019-05-31 16:34:11
4K00
代码可运行
举报
文章被收录于专栏:Devops专栏Devops专栏
运行总次数:0
代码可运行

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

讨论的问题

在上一篇 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居中

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

代码语言:javascript
代码运行次数:0
运行
复制
left: 50%
margin-left: 负自身宽度的一半

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.02.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 讨论的问题
  • 在绝对定位的情况下,设置div居中布局
  • 固定定位设置div居中
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档