技巧：將絕對位置div居中

Carlos Sánchez

1分鐘

在CSS中，有時我們會用比我們想像的要復雜的簡單事情來使我們的生活複雜化， 而且，當我們看到解決方案時，我們幾乎嘲笑觀察這些軼事。

有多個人問我如何將絕對定位的div居中，答案很簡單：

  1. 我們給div一個固定的寬度。 示例：500px
  2. 我們將div絕對定位為剩餘50％。 示例：位置：絕對；左側：50％；
  3. 我們用保證金減去一半。 示例：margin-left：-250px；

結果是一個完美居中，絕對定位的div。


發表您的評論

您的電子郵件地址將不會被發表。 必填字段標有 *

*

*

  1. 負責數據：MiguelÁngelGatón
  2. 數據用途：控制垃圾郵件，註釋管理。
  3. 合法性：您的同意
  4. 數據通訊：除非有法律義務，否則不會將數據傳達給第三方。
  5. 數據存儲：Occentus Networks（EU）託管的數據庫
  6. 權利：您可以隨時限制，恢復和刪除您的信息。

  1.   伊凡·里拉（Ivan Lira） 他說：
    前 13年

    非常感謝..正如您所說的這麼簡單，儘管時光流逝，他仍然是許多頭痛的作者。
    您的帖子對我非常有用，非常感謝。

    回复伊万·里拉
  2.   棒子 他說：
    前 13年

    非常感謝你 ！！！

    回复cob
  3.   格羅布曼 他說：
    前 12年

    好的貢獻對我有很大幫助，謝謝

    回复Glbroman
  4.   盧卡斯 他說：
    前 12年

    他為我服務真是太瘋狂了：D

    回复LUCASG
  5.   勝利者 他說：
    前 11年

    非常感謝...

    回复勝利者
  6.   本傑明 他說：
    前 11年

    很好，卡洛斯。

    回複本傑明
  7.   Mario Lozano的圖片 他說：
    前 11年

    極好的信息

    回复Mario Lozano
  8.   弗蘭克·科克 他說：
    前 11年

    謝謝，為我服務

    回复弗蘭克·科克
  9.   渣 他說：
    前 10年

    你救了我！！！ 謝謝 ：）

    回复馬克
  10.   丹尼爾·弗洛伊德（Danielfloyd） 他說：
    前 10年

    謝謝叔叔，這對我有很大幫助！

    回复DanielFloyd
  11.   達米安 他說：
    前 9年

    非常感謝你 ！！！！！ 這個把戲總是幫助我哈哈

    回复達米安
  12.   o 他說：
    前 9年

    非常感謝你，好朋友

    回覆或
  13.   克里斯瑪特·安吉（Chrismart Anji） 他說：
    前 8年

    這不是居中的，這完全取決於基礎div元素的原始大小（我們根據放置在其中的內容而定），對於我來說，如果我看到它更加居中且反應靈敏，則比視覺上更有用：

    絕對;
    剩下：50％;
    左邊距：-100px;

    那將是一半。

    回复克里斯瑪特·安吉（Chrismart Anji）
  14.   埃德加·朱諾 他說：
    前 7年

    感謝您的貢獻，它真的對我有幫助，問候！

    回复埃德加·朱諾
  15.   米里亞姆·傑斯（Miriam Jess） 他說：
    前 6年

    很好的貢獻幫了我很多，一千個恩典！

    回复米里亞姆·傑斯