一、水平居中 1.margin:0 auto在絕對定位中就失效了 2.如何讓絕對定位的元素水平居中？ 只需要設置絕對定位元素的left:50%；然後再設置絕對定位元素的margin-left:-元素寬的一半； 這樣就可以完成水平居中了 div{ width:50px;/*如果數值為100%，就代表這 ...
一、水平居中
1.margin:0 auto在絕對定位中就失效了
2.如何讓絕對定位的元素水平居中？
只需要設置絕對定位元素的left:50%；然後再設置絕對定位元素的margin-left:-元素寬的一半；
這樣就可以完成水平居中了
div{ width:50px;/*如果數值為100%，就代表這個div的寬度就是瀏覽器的整個寬度*/ height:50px; background-color: red; position:absolute; left:50%;/*使用百分比意味著這個絕對定位的塊左邊距離瀏覽器一半的距離*/ } .......省略代碼...... <body> <div></div> </body>
二、團購界面
註意點：這裡的標誌以及電腦配置，都是通過設置背景圖片和絕對定位、相對定位來進行配置上的；這裡面使用了span這個標簽，由於已經脫離了標準流，因此不需要在設置為display:inline-block;了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D155_GroupPurchase</title> <style> *{ margin:0px; padding:0px; } div{ width: 500px; height: 550px; border:1px black solid; margin:0 auto; margin-top:100px; position:relative;/*這裡想要利用子絕父相來進行排版圖片的商標和配置的信息*/ } div img{ width: 500px; height: 500px; } div .brand{ width: 111px; height: 29px; background: url("image/laptop_label.jpg") no-repeat -21px -12px; position:absolute; left: 20px; top:0px; } div .configuration{ width: 435px; height: 40px; background:url("image/laptop_label.jpg") no-repeat -78px -515px; position:absolute; left:20px; top:505px; } </style> </head> <body> <div> <img src="image/laptop.jpg" alt=""> <span class = "brand"></span> <span class = "configuration"></span> </div> </body> </html>
三、源碼：
D154_CenterHorizontally.html
D155_GroupPurchase.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D154_CenterHorizontally.html
https://github.com/ruigege66/HTML_learning/blob/master/D155_GroupPurchase.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
