{"id":113,"date":"2023-07-24T14:51:40","date_gmt":"2023-07-24T06:51:40","guid":{"rendered":"http:\/\/guozining.cn\/?p=113"},"modified":"2023-07-25T10:39:50","modified_gmt":"2023-07-25T02:39:50","slug":"%e4%b8%8a%e4%b8%8b%e5%b7%a6%e5%8f%b3%e5%b1%85%e4%b8%ad%e5%af%b9%e9%bd%90","status":"publish","type":"post","link":"https:\/\/guozining.cn\/index.php\/2023\/07\/24\/%e4%b8%8a%e4%b8%8b%e5%b7%a6%e5%8f%b3%e5%b1%85%e4%b8%ad%e5%af%b9%e9%bd%90\/","title":{"rendered":"\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d\u5bf9\u9f50"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">display:&nbsp; inline\/inline-block<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5c06\u7236\u5143\u7d20\uff08\u5bb9\u5668\uff09\u8bbe\u5b9a text-align: center\uff1b \u5373\u53ef\u5de6\u53f3\u7f6e\u4e2d\u3002<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">display: block<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5c06\u5143\u7d20\u672c\u8eab\u7684 margin-left \u548c margin-right \u8bbe\u5b9a\u4e3aauto; \u5373\u53ef\u5de6\u53f3\u7f6e\u4e2d\u3002<\/h4>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e00\uff1aPosition: Absolute \u5bf9\u9f50\u5143\u7d20\u672c\u8eab<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n        &lt;title&gt;\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d\u5bf9\u9f50&lt;\/title&gt;\n        &lt;style type=\"text\/css\"&gt;\n            #box {\n                width: 100px;\n                height: 100px;\n                border: 2px solid #0000FF;\n            }\n            \n            #box {\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translateX(-50%) translateY(-50%);\n               \n             \/* \u6216\u8005\u8fd9\u6837\u5199 *\/\n                right: 50%;\n                bottom: 50%;\n                transform: translateX(50%) translateY(50%);\n            }\n           \n        &lt;\/style&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n            &lt;div id=\"box\"&gt;&lt;\/div&gt;    \n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e8c\uff1aFlexbox \u5bf9\u9f50\u5143\u7d20\u5185\u5bb9<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n        &lt;title&gt;\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d\u5bf9\u9f50&lt;\/title&gt;\n        &lt;style type=\"text\/css\"&gt;\n            #box {\n                width: 100px;\n                height: 100px;\n                border: 2px solid #0000FF;\n            }\n            body {\n                min-height: 100vh;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n            }\n        &lt;\/style&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n            &lt;div id=\"box\"&gt;&lt;\/div&gt;    \n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e09\uff1aDisplay : Table \u5bf9\u9f50\u5143\u7d20\u5185\u5bb9<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n        &lt;title&gt;\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d\u5bf9\u9f50&lt;\/title&gt;\n        &lt;style type=\"text\/css\"&gt;\n            #box {\n                width: 100px;\n                height: 100px;\n                border: 2px solid #0000FF;\n                display: inline-block;\n            }\n            body {\n                display: table;\n                width: 100%;\n                min-height: 100vh;\n                margin: 0;\n            }\n            \n            .cell {\n                display: table-cell;\n                vertical-align: middle;\n                text-align: center;\n            }\n        &lt;\/style&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div class=\"cell\"&gt;\n            &lt;div id=\"box\"&gt;&lt;\/div&gt;\n        &lt;\/div&gt;    \n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>display:&nbsp; inline\/inline-block \u5c06\u7236\u5143\u7d20\uff08\u5bb9\u5668\uff09\u8bbe\u5b9a text-alig [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[16,15],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-14","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":3,"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guozining.cn\/index.php\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}