已知图片大小，让其在页面中垂直水平居中
生活随笔
收集整理的這篇文章主要介紹了
已知图片大小，让其在页面中垂直水平居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
昨天在做項目的時候，遇到一個圖片水平垂直居中的問題，要解決這個問題筆者想到了一個很簡單的辦法。
首先我們把頁面的框架做出來，上代碼：
<html><head><title>圖片水平垂直居中</title><style>.my_div{width:1000px;height:700px;border:1px?solid?red;position:relative;}.my_img{display:block;width:400px;height:300px;position:absolute;left:50%;?????????????//絕對定位讓圖片距離左邊50%top:50%;???????????????//同上margin-left:?-200px;????????//還要減去圖片寬度的一半margin-top:-150px;????????????//同上}</style></head><body><div?class="my_div"><img?class="my_img"?src="weixin.png"?/></div></body> </html>這樣就實現了我們的要求了，大家仔細看嵌入到里邊的css代碼，不難發現，我把圖片采用了絕對定位，讓它的left和top都等于50%，但是這并不意味著圖片就水平和垂直居中了，此時可以巧妙的才用負的margin（可能有很多小朋友還不知道margin有負的這種寫法，不懂就問度娘吧）來減去圖片寬高的一半，然后，目的就達到了，是不是 so easy 啊！
舉一反三：不僅僅只適用于圖片外邊是div（盒子）的模型，還可以相對于整個窗口居中，都是類似的（讓圖片position:fised；就OK了）
轉載于:https://blog.51cto.com/10271962/1717364
總結
以上是生活随笔為你收集整理的已知图片大小，让其在页面中垂直水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java回调使用小结
- 下一篇： PHP函数操作数组（集合贴）