实现div里的img图片水平垂直居中
生活随笔
收集整理的這篇文章主要介紹了
实现div里的img图片水平垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
body結構
<body><div><img src="1.jpg" alt="haha"></div> </body>方法一：
將display設置成table-cell，然后水平居中設置text-align為center，垂直居中設置vertical-align為middle。
<style type="text/css">*{margin: 0;padding: 0;}div{width:150px;height: 100px;display: table-cell;vertical-align: middle;text-align: center;border:1px solid #000;}img {width: 50px;height: 50px; } </style>方法二：
通過position定位來實現。將div設置成相對定位relative，將img設置成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位于div的中心，要是圖片的中心位于div的中心，就需要將圖片向上移動圖片高度的一半，并向左移動圖片寬度的一半。
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;position: relative;border:1px solid #000;}img {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;margin-top: -25px; /* 高度的一半 */margin-left: -25px; /* 寬度的一半 */} </style>方法三：可以用在不清楚圖片圖片或元素的真實寬高情況下
還是通過position定位來實現。將div設置成相對定位relative，將img設置成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位于div的中心，要是圖片的中心位于div的中心，就需要將圖片向上移動圖片高度的一半，并向左移動圖片寬度的一半，如果不知道元素的寬高，可以用transform: translate(-50%,-50%);
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;position: relative;border:1px solid #000;}img {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} </style>#####方法四：
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;position: relative;border:1px solid #000;}img {width: 50px;height: 50px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} </style>#####方法五：彈性布局flex
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;border:1px solid #000;display: flex;justify-content: center;align-items: center;}img {width: 50px;height: 50px;} </style>總結
以上是生活随笔為你收集整理的实现div里的img图片水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ublox Android 定位超时,[
- 下一篇： hping3拒绝服务攻击小结