利用絕對定位與margin實現元素居中

例:

要讓一個width:100px ; height: 100px;的div,相對body居中。

div{ width:100px; height:100px; border: 1px solid black; box-sizing: border-box;?

position:absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}



因為絕對定位是相對于父級進行的定位,而margin是相對于自身進行定位。

所以,先對div絕對定位,相對于父級,距左50%,距右50%。使div定位點相對父級居中。

再設置margin-top, left,為,負的自身height,width的50%,因margin是相對自身原本位置進行定位,所以,

最終結果為div的中點,相對于其父級,居中。達到我們想要的結果

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關注微信itclanCoder公眾號可收聽更多音頻 前言 關于網...
    itclanCoder閱讀 8,204評論 3 30
  • 各種純css圖標 CSS3可以實現很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,661評論 0 8
  • 本課來自http://www.imooc.com/learn/9請不要用作商業用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,307評論 0 5
  • 同學們: 大家好! 林花謝了春紅,太匆匆! 陪伴大家一年,分別大家一天, 一年不長,一天亦不短...
    武陵薇閱讀 1,206評論 0 1