关闭

css负边距

标签: css
234人阅读 评论(1) 收藏 举报
分类:

为什么绝对定位加负边距可以居中呢?!why?

让我们来一探究竟~~~~

<div style="width: 200px;height: 200px;position: relative;border: 1px solid red;">
    <div style="background-color: green;position: absolute;width: 100px;margin-left: -50px;left: 50%;height: 100px;margin-top: -50px;top: 50%;"></div>
</div>

这里写图片描述

因为
1,居中是相对于父节点。此处父节点定位为rel/abs。ok!
2,css设置负边距的作用。相对定位之后,原来的位置仍然被占据
但是负边距的元素是位置发生了变化,原来的位置也不存在。
3,绝对定位是相对于左上角。居中是图形的正中心在中间,而不是边框!!!!。
4,left:50%是如下效果
这里写图片描述

left:50%指的边框 距离左边框 50%

5,此时正心还在父节点中心的右边。中心必须向左移动50%。

所以是margin-left:-50px;

这种方法:兼容好。但是需要定好元素的宽高。

那如果不能定宽高怎么办?
1,padding-top:100px;padding-bottom:100px;高度不定时,内容可以垂直居中。
2,height:14em;line-height:14em;只能作用于文本
3,display:flex;justify-content:center;align-items:center;多栏多列布局,只兼容FF,Chrome等A等浏览器。
4,display:table-cell;vertical-align:middle;text-align:center;不兼容IE6
5,对于纯文本居中,直接vertical-align:middle;text-align:center;
6,margin:0 auto;兼容IE6,7.IE8不兼容。需要定宽.

1
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8495次
    • 积分:382
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论