想问一下什么时候使用设置绝对定位的方式来设置元素居中

想问一下什么时候使用设置绝对定位的方式来设置元素居中

我的理解是当元素脱离文档流的时候使用margin:0 auto;设置不了水平居中的时候才使用,那么这里给div设置,为什么使用绝对定位的方法来设置水平居中呢?这样不是会脱离文档流吗,有什么好处?还有我感觉定位好像只有fixed固定定位制作侧边导航栏的效果多一点,其余的定位在日常中的一般什么时候用?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,老师在课程中,主要是为了讲解有几种方法可以实现水平居中的效果,如果单纯使用一个margin:0 auto;的话,它只能使得元素水平居中而不能垂直居中,那如果想给元素既设置水平居中,又设置垂直居中,那么就会使用定位的方式来做,并且如果使用了position:absolute;定位设置了居中,会使得元素脱离文档流的。

position:fixed;固定定位是相对浏览器定位的,一般布局中有需要定在某个位置的效果,都会使用固定定位。

position:relative是相对自身定位的,一般是用来作为position:absolute;的参照物来使用。

希望帮助到了你,祝学习愉快!

  • 宝慕林842399 提问者 #1
    老师,如果是单独的img,如何实现垂直居中?除了绝对定位的方式还有别的方式吗?
    2019-01-25 16:27:32
  • 宝慕林842399 提问者 #2
    老师,如果我想给img实现垂直居中,应该怎么实现?是不是只能用position的方式来实现?
    2019-01-25 16:39:08
山河远阔ZZ 2019-01-25 16:59:42

如果在代码中,只有一个单独的img标签的话一般是通过position定位来设置垂直居中。

如果不是一个单独的img标签,有父元素的话,可以给父元素设置固定的高度和行高,然后再给img设置vertical-align:middle,那这样的话img就能垂直居中,参考下图:

http://img1.sycdn.imooc.com//climg/5c4acff60001bc5b07000637.jpg

可以试一试

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师