如何實現不確定寬高的盒子上下左右居中


圖片素材:

<!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自適應。可以想象成一個圖片,給了四個方向的相同的力,這樣就會形成一種相對的均衡力量讓其停留在中間位置了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM