HTML代碼<style type="text/css"><br /><!--<br />* {margin:0;padding:0}<br />div {<br />width:500px;<br />height:500px;<br />border:1px solid #666;<br />overflow:hidden;<br />position:relative;<br />display:table-cell;<br />text-align:center;<br />vertical-align:middle<br />}<br />div p {<br />position:static;<br />+position:absolute;<br />top:50%<br />}<br />img {<br />position:static;<br />+position:relative;<br />top:-50%;left:-50%;<br />}<br />--><br /></style><br /><div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div><br />
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
方法二HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>div裡面圖片垂直置中的幾個例子</title><br /><style type="text/css"><br /><!--<br />body {<br />margin:0;padding:0<br />}<br />div {<br />width:500px;<br />height:500px;<br />line-height:500px;<br />border:1px solid #666;<br />overflow:hidden;<br />position:relative;<br />text-align:center;<br />}<br />div p {<br />position:static;<br />+position:absolute;<br />top:50%<br />}<br />img {<br />position:static;<br />+position:relative;<br />top:-50%;left:-50%;<br />vertical-align:middle<br />}<br />p:after {<br />content:".";font-size:1px;<br />visibility:hidden<br />}<br />--><br /></style><br /></head><br /><body><br /><div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div><br /></body><br /></html><br />方法三 HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>div裡面圖片垂直置中的幾個例子</title><br /><style type="text/css"><br /><!--<br />* {margin:0;padding:0}<br />div {<br />width:500px;<br />height:500px;<br />line-height:500px;<br />border:1px solid #666;<br />overflow:hidden;<br />position:relative;<br />text-align:center;<br />}<br />div p {<br />position:static;<br />+position:absolute;<br />top:50%;<br />vertical-align:middle<br />}<br />img {<br />position:static;<br />+position:relative;<br />top:-50%;left:-50%;<br />vertical-align:middle<br />}<br />--><br /></style><br /></head><br /><body><br /><div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div><br /></body><br /></html><br />方法四（針對背景圖片置中） HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>div裡面圖片垂直置中的幾個例子</title><br /><style type="text/css"><br /><!--<br />* {margin:0;padding:0;}<br />div {<br />width:500px;border:1px solid #666;<br />height:500px;<br />background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat<br />}<br />--><br /></style><br /></head><br /><body><br /><div></div><br /></body><br /></html><br />
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
