css负边距

原创 2016年08月28日 15:26:35

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

position,z-index,float覆盖问题

最近仿写天猫首页时,总是遇到position覆盖问题。因此,特来总结一番。 一般定位除了margin,padding普通流的定位外,还有position ,float等定位。 这些都是定位...

vue学习之一基础学习

http://cn.vuejs.org看官方文档,写的很不错作用:基于dom.构建数据驱动。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件系统比较:(专注与灵活)1,angular:小易...

css+html5仿写淘宝首页

问题定义 为了锻炼自己原生的能力,我决定仿写一下淘宝的首页。一下记录,仿写的全部步骤。按照软件工程的方法来实现。(ps,纯为学习,没有什么不良居心~~) 可行性研究技术采用原生js+html5+c...

css负边距

本片博客学习segmentfault这篇文章后,实践理论后所写,偏向实践图文验证,部分好的概念性东西,直接引用。我们在写css的时候,可能往往忽略了如果css设置负边距的情景, 他们是完全有效的CSS...

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。...

css负边距

CSS布局奇淫巧计之-强大的负边距 css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布...

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端 的同学来说,那是必须...

CSS布局奇淫巧计之-强大的负边距

转自:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html css中的负边距(negative margin)是布局中的一个常用...

[html5入门-27]CSS布局奇淫巧计之-强大的负边距

来源:点击打开链接 css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)