为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/初识HTML(5)+CSS(3)-升级版

不定宽块状元素居中

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。我怎么还是理解不了是个什么过程，太愚笨了？

summer乐

2016-10-29

源自：初识HTML(5)+CSS(3)-升级版  15-7

关注问题 我要回答
774
操作
收起

正在回答

2 回答

宝慕林8521498 回答被采纳 +3 积分
2016-10-29

同学你已经总结出来要怎么做了，说明你还是能理解的。首先设置float是将父元素居左，position:relative是相对于浏览器进行移动，然后通过left:50%往右移将父元素左边框到浏览器中线重合。子元素左边框就会与浏览器中线重合，子元素设置 position:relative 后，子元素就能相对父元素进行移动的，再通过 left: -50%相对于父元素开始往左移动50%，子元素中线就与浏览器中线重合了，最终就居中了

4 回复 有任何疑惑可以回复我~
收起回答
#1

summer乐 提问者

非常感谢！
2016-10-29 回复 有任何疑惑可以回复我~
#2

summer乐 提问者

这种情况下，父元素其实没有居中的是吧，求解释一下left: -50%什么意思
2016-10-29 回复 有任何疑惑可以回复我~
#3

宝慕林8521498

回复 summer乐 是的，父元素的盒子左端和浏览器中间是重合的，哈哈，同学我也是刚刚开学学习，也在这卡过壳，有空可以一起继续讨论讨论哈
2016-10-30 回复 有任何疑惑可以回复我~
#4

qq_苔上雪_04205930 回复 宝慕林8521498

我也觉得 父元素的盒子左端和浏览器中间是重合的是对的，但是子元素left: -50%，这个50%如果是父元素盒子的的50%，子元素其实没有居中。。除非，子元素盒子和父元素盒子一样宽，对吗？ 卡这卡了半天
2016-10-30 回复 有任何疑惑可以回复我~
#5

一曲终了繁华落 回复 summer乐 提问者

left:50%不是相对于父元素右移50%，-50%就是相对于父元素左移50%吧，我这样理解的 不知对不对
2016-11-02 回复 有任何疑惑可以回复我~
#6

我也在世界末尾 回复 qq_苔上雪_04205930

是不是可以理解为父子元素的盒模型是一样宽度的..不然没法居中啊
2016-11-03 回复 有任何疑惑可以回复我~
#7

qq_苔上雪_04205930 回复 我也在世界末尾

我后面的理解是，父元素是的50%是指浏览器这个父元素的50%，子元素的50%是指父元素的-50%，这种情况下子元素是对齐了的。只是子元素中的文本扔是从左往右书写的，这里所谓的居中 是指子元素（子元素内有文本）的盒子相对浏览器居中。
2016-11-03 回复 有任何疑惑可以回复我~
#8

LordMario

这下就真的理解了！
2016-11-24 回复 有任何疑惑可以回复我~
#9

weibo_韬奋小伙亚亚_0 回复 summer乐 提问者

向右移动50%
2016-11-25 回复 有任何疑惑可以回复我~
查看6条回复
木木明明
2016-10-29

他们是一种逻辑关系

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226801    人
  • 解答问题       18245    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

2 回答关于定宽块状元素居中

1 回答定宽块状元素居中问题

4 回答定宽块状元素_水平居中设置

1 回答水平居中设置-定宽块状元素

3 回答不是能够理解定宽块状元素居中。
搜索更多本课相关问答

不定宽块状元素居中

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信