{"id":430,"date":"2010-05-29T13:46:39","date_gmt":"2010-05-29T13:46:39","guid":{"rendered":""},"modified":"2010-05-29T13:46:39","modified_gmt":"2010-05-29T13:46:39","slug":"430","status":"publish","type":"post","link":"https:\/\/www.poloo.org\/?p=430","title":{"rendered":"DIV+CSS\u5e03\u5c40\u4e2d\u7684\u5c45\u4e2d\u95ee\u9898"},"content":{"rendered":"

1\u3001DIV\u5c45\u4e2d

body {text-align: center;}
div {margin-right: auto; margin-left: auto;}
<\/code>
\u8bf4\u660e\uff1a\u5bf9\u4e8eIE\uff0c\u5728\u7236\u5143\u7d20\u5b9a\u4e49\u201ctext-align: center;\u201d\u5c31\u53ef\u4ee5\u4e86\u5bf9\u4e8eFF\u7b49\u5176\u4ed6\u6d4f\u89c8\u5668\uff0c\u4ec5\u8fd9\u6837\u4e0d\u80fd\u5c45\u4e2d\uff0c\u9700\u5728\u5b50\u5143\u7d20\u4e2d\u5b9a\u4e49\u201cmargin-right: auto; margin-left: auto;\u201d\u3002<\/p>\n

2\u3001\u80cc\u666f\u5c45\u4e2d

body {background:url(#) #fff no-repeat center;}
<\/code>
\u8bf4\u660e\uff1a\u53c2\u6570\u4e2d\u7684center\u662f\u5bf9\u80cc\u666f\u4f4d\u7f6e\u7684\u5b9a\u4e49\u3002<\/p>\n

3\u3001\u6587\u672c\u5782\u76f4\u5c45\u4e2d

div {vertical-align:middle;line-height:\uff1fpx;}
<\/code>
\u8bf4\u660e\uff1avertical-align:middle;\u8868\u793a\u884c\u5185\u5782\u76f4\u5c45\u4e2d\uff0c\u6211\u4eec\u5c06\u884c\u8ddd\u8c03\u6574\u5230\u548c\u6574\u4e2aDIV\u4e00\u6837\u9ad8\uff0c\u6587\u5b57\u5c31\u5782\u76f4\u5c45\u4e2d\u4e86\u3002 <\/p>\n

\u4e0b\u9762\u662f\u51e0\u4e2a\u4f8b\u5b50\uff1a

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd<\/a>\">
<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml<\/a>\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>
<title>div\u91cc\u9762\u56fe\u7247\u5782\u76f4\u5c45\u4e2d\u7684\u51e0\u4e2a\u4f8b\u5b50<\/title>
<style type=\"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>
<\/head>
<body>
<div><p><img src=\"http:\/\/www.google.com\/intl\/en\/images\/logo.gif<\/a>\" \/><\/p><\/div>
<\/body>
<\/html>
<\/code><\/p>\n


<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd<\/a>\">
<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml<\/a>\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>
<title>div\u91cc\u9762\u56fe\u7247\u5782\u76f4\u5c45\u4e2d\u7684\u51e0\u4e2a\u4f8b\u5b50<\/title>
<style type=\"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><img src=\"http:\/\/www.google.com\/intl\/en\/images\/logo.gif<\/a>\" \/><\/p><\/div>
<\/body>
<\/html>
<\/code><\/p>\n


<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd<\/a>\">
<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml<\/a>\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>
<title>div\u91cc\u9762\u56fe\u7247\u5782\u76f4\u5c45\u4e2d\u7684\u51e0\u4e2a\u4f8b\u5b50<\/title>
<style type=\"text\/css\">
<!--
* {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%;
  vertical-align:middle
}
img {
  position:static;
  +position:relative;
  top:-50%;left:-50%;
  vertical-align:middle
}
-->
<\/style>
<\/head>
<body>
<div><p><img src=\"http:\/\/www.google.com\/intl\/en\/images\/logo.gif<\/a>\" \/><\/p><\/div>
<\/body>
<\/html>
<\/code><\/p>\n

\u80cc\u666f\u65b9\u5f0f\uff1a

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd<\/a>\">
<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml<\/a>\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>
<title>div\u91cc\u9762\u56fe\u7247\u5782\u76f4\u5c45\u4e2d\u7684\u51e0\u4e2a\u4f8b\u5b50<\/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<\/a>\") center no-repeat
}
-->
<\/style>
<\/head>
<body>
<div><\/div>
<\/body>
<\/html>
<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

1\u3001DIV\u5c45\u4e2dbody {text-align: center;} ...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-430","post","type-post","status-publish","format-standard","hentry","category-Note"],"_links":{"self":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/posts\/430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=430"}],"version-history":[{"count":0,"href":"https:\/\/www.poloo.org\/index.php?rest_route=\/wp\/v2\/posts\/430\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.poloo.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}