css如何實現圖片垂直水平居中
但其實css圖片居中有多種不同的情況，也有多種不同的解決方法，具體方法如下所示：
圖片居中又分為水平居中和垂直居中
一、水平居中：
1、單獨文字垂直居中我們只需要設定CSS樣式line-height屬性即可。
2、文字與圖片同排，在設定div高度同時再對此css樣式的圖片“img”樣式設定vertical-align:middle垂直居中屬性，如.yangshi img{vertical-align:middle;} 。
3 不確定寬度的塊級元素設定水平居中的方法
（1）、是使用table作為容器的方法來實現。當然不大推薦使用這種方法，因為添加了無意義的標籤。這裡就稍微介紹一下吧。Table標籤本身並不是塊級元素，當我們不設定table的寬度的話，他裡面的寬度是由他內部元素的寬度撐起來的。但即使我們沒有設定table的寬度，直接設定table的外邊距margin：0 auto;就可以實現水平居中了!這樣我們就可以通過設定table水平居中，間接使裡面的內容居中。
（2）、相對於用table的方法的好處是不用增加無語義標籤，簡化標籤巢狀深度。這個思路是這樣的，通過改變塊級元素的display屬性值為inline型別，然後設定text-align:center來實現居中。這種方法也有一定不妥之處就是把塊級元素改為行內元素後，行內元素比塊元素少了一些功能。比如說設定長寬值等，在專案運用中可能會有一些限制，大家可以自行選擇。
（3）、通過給父元素設定浮動float，再設定父元素的position屬性為relative和left：50%;子元素設定position：relative和left：-50%來實現水平居中。這個好處是可以保留塊級元素仍然是以display：block的形式顯示，不會新增無意義的標籤，不新增巢狀深度。確點是設定了position：relative;帶來了一些副作用。下面是第三種方法的例項程式碼，放到body標籤裡面就可以了。
二、垂直居中：
對這個CSS居中問題，我們可以使用設定背景圖片的方法。舉例：
body {BACKGROUND: url(”圖片檔案”) #FFF no-repeat center;}
關鍵就在於這個Center屬性，它表示讓該背景圖片在容器中居中。你也可以把Cener換成Top Left或者直接寫上數字來調整它的位置。
方法一:
<styletype="text/css"><!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
}
--></style>
<div><p><imgsrc="http://www.google.com/intl/en/images/logo.gif" /></p></div>方法二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>div裡面圖片垂直居中的幾個例子</title>
<styletype="text/css"><!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
--></style>
</head>
<body>
<div><p><imgsrc="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html> 方法三:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<