圖片素材:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <img src="loading.jpg" alt=""> </body> </html>
讓未定義寬高的圖片上下左右距離都為0.然后給一個margin自適應。可以想象成一個圖片,給了四個方向的相同的力,這樣就會形成一種相對的均衡力量讓其停留在中間位置了。