圖片寬度大於父元素寬度時，水平居中 。
阿新 • • 發佈：2020-11-28
圖片寬度大於父元素寬度時，水平居中 。
如果圖片寬度大於父元素寬度不能使用 margin: 0 auto;或者text-align: center;讓圖片居中
目錄使用定位
弊端：受圖片大小限制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 800px; height: 1000px; background-color: aqua; margin: 0 auto; } img { position: absolute; left: 50%; margin-left: -960px; } </style> </head> <body> <div> <img src="./img.jpg" alt=""> </div> </body> </html>
使用transform優化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 800px; height: 1000px; background-color: aqua; margin: 0 auto; } img { position: relative; left: 50%; /* margin-left: -960px; */ transform: translateX(-50%); } </style> </head> <body> <div> <img src="./img.jpg" alt=""> </div> </body> </html>
奇技淫巧
margin: 0 -100%;必須和父元素 text-align: center;搭配使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 800px; height: 1000px; background-color: aqua; margin: 0 auto; text-align: center; } img { margin: 0 -100%; } </style> </head> <body> <div> <img src="./img.jpg" alt=""> </div> </body> </html>