{"id":39,"date":"2015-03-02T19:18:18","date_gmt":"2015-03-02T11:18:18","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=39"},"modified":"2021-01-19T15:39:05","modified_gmt":"2021-01-19T07:39:05","slug":"%e6%b0%b8%e6%81%92%e7%9a%84%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=39","title":{"rendered":"\u6c38\u6052\u7684\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"186\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/01\/b48993869ec931d78a25d5522a2b5f2d.jpeg\" alt=\"\" class=\"wp-image-429\" srcset=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/01\/b48993869ec931d78a25d5522a2b5f2d.jpeg 500w, https:\/\/zhuxinyong.com\/wp-content\/uploads\/2021\/01\/b48993869ec931d78a25d5522a2b5f2d-300x112.jpeg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n\n<p>CSS\u4e2d\u5c45\u4e2d\u95ee\u9898\u662f\u6c38\u8fdc\u7684\u8bdd\u9898\u7279\u522b\u662f<strong>\u5782\u76f4\u5c45\u4e2d<\/strong>\uff0c\u5404\u8def\u9ad8\u624b\u4f7f\u51fa\u5404\u79cd\u201c\u5947\u5f02\u6deb\u201d\u7684\u65b9\u6cd5\u3002\u524d\u6bb5\u65f6\u95f4\u4e00\u76f4\u641eJS\uff0c\u597d\u4e45\u6ca1\u6709\u5f04CSS\u4e86\u8fd9\u6b21\u516c\u53f8\u505a\u4e86\u7535\u5546\u3002\u9047\u5230\u5546\u54c1\u7684\u56fe\u7247\u9700\u8981\u5904\u7406\uff0c\u6240\u4ee5\u5f97\u603b\u7ed3\u4e00\u4e0b\uff0c\u4e0d\u80fd\u6bcf\u6b21\u5199\u90fd\u53bb\u67e5\u8d44\u6599\u3002<\/p>\n\n\n\n<p>\u4ee3\u7801\u7ed3\u6784\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"box\">\n\t&lt;img src=\"#\" alt=\"\" width=\"100\" height=\"100\">\n&lt;\/div>\n\n.box{\n\twidth: 400px;\n\theight: 400px;\n\tbackground-color:#999;\n\ttext-align: center;\n}\n\n.box img{\n\t\n}\n<\/pre>\n\n\n\n<p>\u4e0b\u9762\u5c31\u53ea\u5199css\u4ee3\u7801\u3002<\/p>\n\n\n\n<p><strong>1. ie9+\uff0cFF\uff0cChrome\u7b49<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box img{\n\tposition:relative;\n\ttop:50%;\n\ttransform:translateY(-50%);\n}\n<\/pre>\n\n\n\n<p>\u8fd9\u4e2a\u95ee\u9898\u4f1a\u5bfc\u81f4\u5143\u7d20\u6a21\u7cca\uff0c\u89e3\u51b3\u65b9\u6cd5\uff1a\u5728\u7236\u7ea7\u5143\u7d20\u4e0a\u6dfb\u52a0__preserve-3d__\u3002\u50cf\u4e0b\u9762\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n\ttransform-style: preserve-3d;\n}\n<\/pre>\n\n\n\n<p><strong>2. ie8+\uff0cFF\uff0cChrome\u7b49<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n\twidth: 400px;\n\theight: 400px;\n\tbackground-color:#999;\n\ttext-align: center;\n\n\tdisplay:table-cell;\n\tvertical-align: middle;\n}\n<\/pre>\n\n\n\n<p><strong>3. ie6+\uff0cFF\uff0cChrome\u7b49<\/strong><\/p>\n\n\n\n<p>html:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"box\">\n\t&lt;i>&lt;\/i>&lt;img src=\"#\" alt=\"\" width=\"100\" height=\"100\">\n&lt;\/div>\n<\/pre>\n\n\n\n<p>css\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box img{\n\tvertical-align: middle;\n}\n.box i{\n\tdisplay: inline-block;\n\t*display: inline;\n\t*zoom: 1;\n\theight: 100%;\n\tvertical-align: middle;\n}\n<\/pre>\n\n\n\n<p>\u6ce8\uff1a<code>&lt;i&gt;&lt;\/i&gt;<\/code>\u8981\u548c<code>&lt;img\/&gt;<\/code>\u5143\u7d20\u7d27\u6328\u7740\uff0c\u8fd9\u7275\u626f\u5230inline-block\u7684\u7f1d\u9699\u95ee\u9898\u3002<\/p>\n\n\n\n<p><strong>4. ie9+\uff0cFF\uff0cChrome\u7b49<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box:before{\n\tdisplay: inline-block;\n\tcontent:\"\";\n\theight: 100%;\n\tvertical-align: middle;\n}\n.box img{\n\tvertical-align: middle;\n}\n<\/pre>\n\n\n\n<p>\u5176\u5b9e\u8fd9\u4e2a\u548c\u4e0a\u9762\u7684\u539f\u7406\u662f\u4e00\u6837\u7684\uff0c\u53ea\u662f\u8bf4\u90a3\u4e2a\u53c2\u8003\u5143\u7d20\u4e0d\u8981\u624b\u52a8\u6dfb\u52a0\uff0c\u5982\u679c\u4f60\u6709\u4ee3\u7801\u6d01\u7656\u5e76\u4e14\u6d4f\u89c8\u5668\u517c\u5bb9\u8981\u6c42\u8fbe\u5230\u8fd9\u4e2a\u65b9\u6cd5\u8fd8\u662f\u9760\u8c31\u7684\u3002<\/p>\n\n\n\n<p><strong>5. ie8+\uff0cFF\uff0cChrome\u7b49<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n\twidth: 400px;\n\theight: 400px;\n\tbackground-color:#999;\n\tposition: relative;\n}\n.box img{\n\tposition:absolute;\n\ttop:0;\n\tbottom:0;\n\tleft:0;\n\tright:0;\n\tmargin:auto;\n}\n<\/pre>\n\n\n\n<p><strong>6. ie10+\uff0cFF\uff0cChrome\u7b49<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n\twidth: 400px;\n\theight: 400px;\n\tbackground-color:#999;\n\tdisplay:flex;\n\tjustify-content:center;\n\talign-items:center;\n}\n<\/pre>\n\n\n\n<p><strong>7. ie6+\uff0cFF\uff0cChrome\u7b49<\/strong>\uff08\u56fe\u7247\u5c3a\u5bf8\u5df2\u77e5\uff09<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.box{\n\twidth: 400px;\n\theight: 400px;\n\tbackground-color: #666;\n\tposition:relative;\n}\n\n.box img{\n\tposition: absolute;\n\ttop:50%;\n\tleft:50%;\n\tmargin-left: -50px;\n\tmargin-top: -50px;\n}\n<\/pre>\n\n\n\n<p>\u4ee5\u4e0a\u5c31\u662f\u603b\u7ed3\u548c\u6536\u96c6\u7684\u4e00\u4e9b\u65b9\u6cd5\uff0c\u65b9\u4fbf\u81ea\u5df1\u540c\u65f6\u670d\u52a1\u4ed6\u4eba\u3002<\/p>\n\n\n\n<p><a href=\"http:\/\/zerosixthree.se\/vertical-align-anything-with-just-3-lines-of-css\/\" target=\"_blank\" rel=\"noopener\">http:\/\/zerosixthree.se\/vertical-align-anything-with-just-3-lines-of-css\/<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/www.w3.org\/Style\/Examples\/007\/center\" target=\"_blank\" rel=\"noopener\">http:\/\/www.w3.org\/Style\/Examples\/007\/center<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/stackoverflow.com\/questions\/18516317\/vertically-align-an-image-inside-a-div-with-responsive-height\" target=\"_blank\" rel=\"noopener\">http:\/\/stackoverflow.com\/questions\/18516317\/vertically-align-an-image-inside-a-div-with-responsive-height<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/stackoverflow.com\/questions\/7273338\/how-to-vertically-align-an-image-inside-div\" target=\"_blank\" rel=\"noopener\">http:\/\/stackoverflow.com\/questions\/7273338\/how-to-vertically-align-an-image-inside-div<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-css-tricks\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><blockquote class=\"wp-embedded-content\" data-secret=\"AvONR8Qn2Q\"><a href=\"https:\/\/css-tricks.com\/snippets\/css\/absolute-center-vertical-horizontal-an-image\/\" target=\"_blank\" rel=\"noopener\">Absolute Center (Vertical &#038; Horizontal) an Image<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Absolute Center (Vertical &#038; Horizontal) an Image&#8221; &#8212; CSS-Tricks\" src=\"https:\/\/css-tricks.com\/snippets\/css\/absolute-center-vertical-horizontal-an-image\/embed\/#?secret=AvONR8Qn2Q\" data-secret=\"AvONR8Qn2Q\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-vanseo-design\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><blockquote class=\"wp-embedded-content\" data-secret=\"MVz1vw7HvC\"><a href=\"https:\/\/vanseodesign.com\/css\/vertical-centering\/\" target=\"_blank\" rel=\"noopener\">6 Methods For Vertical Centering With CSS<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;6 Methods For Vertical Centering With CSS&#8221; &#8212; Vanseo Design\" src=\"https:\/\/vanseodesign.com\/css\/vertical-centering\/embed\/#?secret=MVz1vw7HvC\" data-secret=\"MVz1vw7HvC\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-css-tricks\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><blockquote class=\"wp-embedded-content\" data-secret=\"AvONR8Qn2Q\"><a href=\"https:\/\/css-tricks.com\/snippets\/css\/absolute-center-vertical-horizontal-an-image\/\" target=\"_blank\" rel=\"noopener\">Absolute Center (Vertical &#038; Horizontal) an Image<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Absolute Center (Vertical &#038; Horizontal) an Image&#8221; &#8212; CSS-Tricks\" src=\"https:\/\/css-tricks.com\/snippets\/css\/absolute-center-vertical-horizontal-an-image\/embed\/#?secret=AvONR8Qn2Q\" data-secret=\"AvONR8Qn2Q\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-david-walsh-blog\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><blockquote class=\"wp-embedded-content\" data-secret=\"3HITaW3Dg4\"><a href=\"https:\/\/davidwalsh.name\/css-vertical-center\" target=\"_blank\" rel=\"noopener\">CSS Vertical Centering<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;CSS Vertical Centering&#8221; &#8212; David Walsh Blog\" src=\"https:\/\/davidwalsh.name\/css-vertical-center\/embed#?secret=3HITaW3Dg4\" data-secret=\"3HITaW3Dg4\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>CSS\u4e2d\u5c45\u4e2d\u95ee\u9898\u662f\u6c38\u8fdc\u7684\u8bdd\u9898\u7279\u522b\u662f\u5782\u76f4\u5c45\u4e2d\uff0c\u5404\u8def\u9ad8\u624b\u4f7f\u51fa\u5404\u79cd\u201c\u5947\u5f02\u6deb\u201d\u7684\u65b9\u6cd5\u3002\u524d\u6bb5\u65f6\u95f4\u4e00\u76f4\u641eJS\uff0c\u597d&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[5],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-css"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=39"}],"version-history":[{"count":3,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":431,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/39\/revisions\/431"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}