但其實(shí)css圖片居中有多種不同的情況，也有多種不同的解決方法，具體方法如下所示：
圖片居中又分為水平居中和垂直居中
一、水平居中：
1、單獨(dú)文字垂直居中我們只需要設(shè)置CSS樣式line-height屬性即可。
2、文字與圖片同排，在設(shè)置div高度同時(shí)再對(duì)此css樣式的圖片“img”樣式設(shè)置vertical-align:middle垂直居中屬性，如.yangshi img{vertical-align:middle;} 。
3 不確定寬度的塊級(jí)元素設(shè)置水平居中的方法
（1）、是使用table作為容器的方法來實(shí)現(xiàn)。當(dāng)然不大推薦使用這種方法，因?yàn)樘砑恿藷o意義的標(biāo)簽。這里就稍微介紹一下吧。Table標(biāo)簽本身并不是塊級(jí)元素，當(dāng)我們不設(shè)置table的寬度的話，他里面的寬度是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置table的寬度，直接設(shè)置table的外邊距margin：0 auto;就可以實(shí)現(xiàn)水平居中了!這樣我們就可以通過設(shè)置table水平居中，間接使里面的內(nèi)容居中。
（2）、相對(duì)于用table的方法的好處是不用增加無語義標(biāo)簽，簡(jiǎn)化標(biāo)簽嵌套深度。這個(gè)思路是這樣的，通過改變塊級(jí)元素的display屬性值為inline類型，然后設(shè)置text-align:center來實(shí)現(xiàn)居中。這種方法也有一定不妥之處就是把塊級(jí)元素改為行內(nèi)元素后，行內(nèi)元素比塊元素少了一些功能。比如說設(shè)定長(zhǎng)寬值等，在項(xiàng)目運(yùn)用中可能會(huì)有一些限制，大家可以自行選擇。
（3）、通過給父元素設(shè)置浮動(dòng)float，再設(shè)置父元素的position屬性為relative和left：50%;子元素設(shè)置position：relative和left：-50%來實(shí)現(xiàn)水平居中。這個(gè)好處是可以保留塊級(jí)元素仍然是以display：block的形式顯示，不會(huì)添加無意義的標(biāo)簽，不添加嵌套深度。確點(diǎn)是設(shè)置了position：relative;帶來了一些副作用。下面是第三種方法的實(shí)例代碼，放到body標(biāo)簽里面就可以了。
二、垂直居中：
對(duì)這個(gè)CSS居中問題，我們可以使用設(shè)置背景圖片的方法。舉例：
body {BACKGROUND: url(”圖片文件”) #FFF no-repeat center;}
關(guān)鍵就在于這個(gè)Center屬性，它表示讓該背景圖片在容器中居中。你也可以把Cener換成Top Left或者直接寫上數(shù)字來調(diào)整它的位置。
方法一:
<style type="text/css">
style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" />p>div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面圖片垂直居中的幾個(gè)例子title>
<style type="text/css">
style>
head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" />p>div>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面圖片垂直居中的幾個(gè)例子title>
<style type="text/css">
style>
head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" />p>div>
body>
html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div里面圖片垂直居中的幾個(gè)例子title> <style type="text/css">
-- * {margin:0;padding:0;} div { width:500px;border:1px solid #666; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
} --> style> head> <body> <div>
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
