技巧:将绝对位置div居中

在CSS中,有时我们会用比我们想象的要复杂的简单事情来使我们的生活复杂化, 而且当我们看到解决方案时,我们几乎嘲笑观​​察这些轶事。

有不止一个人问我如何将绝对定位的div居中,答案很简单:

  1. 我们给div一个固定的宽度。 范例:500px
  2. 我们将div绝对定位为剩余50%。 示例:位置:绝对;左侧:50%;
  3. 我们用保证金减去一半。 示例:margin-left:-250px;

结果是一个完美居中,绝对定位的div。


本文内容遵循我们的原则 编辑伦理。 要报告错误,请单击 信息.

15条评论,留下您的评论

发表您的评论

您的电子邮件地址将不会被发表。

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   伊凡·里拉(Ivan Lira)

    非常感谢..正如您所说的这么简单,尽管时光流逝,他仍然是许多头疼的作者。
    您的帖子对我非常有用,非常感谢。

  2.  

    非常感谢你 !!!

  3.   格罗布曼

    好的贡献对我有很大帮助,谢谢

  4.   卢卡斯

    他为我服务真是太疯狂了:D

  5.   胜利者

    非常感谢...

  6.   本杰明

    很好,卡洛斯。

  7.   Mario Lozano的图片

    极好的信息

  8.   弗兰克·科克

    谢谢,为我服务

  9.  

    你救了我!!! 谢谢 :)

  10.   丹尼尔·弗洛伊德(Danielfloyd)

    谢谢你叔叔,你对我的帮助很大!

  11.   达米安

    非常感谢你 !!!!! 这个把戏总是帮我哈哈

  12.   o

    非常感谢你的好朋友

  13.   克里斯玛特·安吉(Chrismart Anji)

    这不是居中的,这全都取决于基础div元素的原始大小(我们将其放置在其中),具体取决于放置在其中的内容。对我来说,如果我看到它更加居中且更直观,则使用它比视觉上更有用响应式:

    绝对;
    左:50%;
    左边距:-100px;

    那将是一半。

  14.   埃德加·朱诺

    感谢您的贡献,它真的对我有帮助,问候!

  15.   米里亚姆·杰斯(Miriam Jess)

    很好的贡献帮了我很多,一千个恩典!