html中的“ position: absolute”是绝对定位,怎么用?

html中的“ position: absolute”是绝对定位,怎么用?,第1张

html中的“position:absolute”是绝对定位,一般配合“top”和“left”属性同时使用。

1、新建html文档,在body标签中添加一个div,然后在这个div中再添加一个div,这时默认情况下内div在外div的左上角:

2、为内div添加“position”属性,属性值为“absolute”,外div添加“position”属性,属性值为“relative”,这时内div会向外div绝对定位:

3、为内div设置距离顶部距离属性“top”和距离左侧属性“left”,这时内div会向外div做指定距离的定位:

1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。

2、打开浏览器查看结果,图片已处于正中状态。

3、第二种方法css代码如图。div设置成相对定位,img设置成绝对定位,然后left:50%,top:50%,此时图片的左上角将位于div的中心。重点:图片向上移动图片高度的一半,并向左移动图片宽度的一半。正好为与div正中间。

4、在浏览器查看结果,图片水平,垂直均居中。

既然是绝对定位,就没有居中这一说法,因为居中肯定参考某一值来居中的,例如参考浏览器居中。应该是相对对位,如果是相对定位的话,直接margin:0 auto 就可以了。另外,我估计你的意思是某一个DIV块是绝对定位,然后里面的东西是相对这个div块居中,那么也是定义里面块margin属性就可以了


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/6142773.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-03-16
下一篇2023-03-16

发表评论

登录后才能评论

评论列表(0条)

    保存