CSS布局實例，這個例子相信很實用，讓一個圖片在Div容器中上下、左右都居中，也就是水平和垂直都居中，有用吧，平時遇到的機率挺高的，下面結合CSS和HTML來實現這個演示，請參見代碼：

<style type="text/css">div{border:1px solid #ccc;height:500px;width:500px;text-align:center;margin:0 auto;background:#ccc;}img{vertical-align:middle;}div span{height:100%;width:0;overflow:hidden;display:inline-block;vertical-align:middle} </style> <div class="test"> <img src="http://p.ananas.chaoxing.com/star3/origin/53c8d26ba310a822ad8b3447.jpg"><span> </span> </div>

　　測試效果：可看到圖片在Div class內水平和垂直居中

總結

以上是生活随笔為你收集整理的CSS布局：设置图片在DIV中上下左右居中(水平和垂直都居中)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。