任意一個圖片，在div中都居中顯示，這是比較常用的CSS，很多剛學(xué)習(xí)的新手卻并不知道！

div{?border:1px?solid?#ccc;

height:500px;?width:500px;?line-height:?500px;

text-align:center;

background:#ccc;}

img{?vertical-align:middle;max-width:?100%;max-height:?100%;?}

或者:

div{?border:1px?solid?#ccc;

height:500px;?width:500px;

text-align:center;

background:#ccc;}

img{?vertical-align:middle;max-width:?100%;max-height:?100%;?}

div?span{?height:100%;?width:0;?overflow:hidden;?display:inline-block;?vertical-align:middle;?}

第一段CSS和第二段有什么不同呢？ 第一段CSS使用了line-height:?500px;，第二段沒有l(wèi)ine-height，CSS和HTML卻都多了span，都實現(xiàn)一樣的效果！

可能會有疑問，比如圖片后面加入span干什么呢？難道是標題的用途？NO！

span是為img撐開空間用的，img比較特殊，不會撐起上下空間，圖片本身的尺寸只能限制圖片，上下居中，必須有span為它撐開一定垂直空間，它在一定空間中才可以！

第一段中沒有使用span，一樣垂直居中了，又是如何辦到的？因為div的CSS使用了line-height:?500px;，就已經(jīng)用行高撐起了空間，所以無需span！ 兩種方法都可以，但具體到實際代碼中可以挑選其中一種！

總結(jié)

以上是生活随笔為你收集整理的Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。