诗与远方

生活~诗~远方

css负边距

为什么绝对定位加负边距可以居中呢?!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不兼容。需要定宽.

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28300493/article/details/52345970
文章标签: css
个人分类: 生活&学习 css
上一篇position,z-index,float覆盖问题
下一篇啦啦啦啦啦啦啦啦啦啦啦啦这是一篇分界线
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭