{"id":164,"date":"2025-11-24T16:01:14","date_gmt":"2025-11-24T08:01:14","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=164"},"modified":"2025-11-24T16:01:14","modified_gmt":"2025-11-24T08:01:14","slug":"css-place-items-center%e8%a7%a3%e6%9e%90%e4%b8%8e%e7%94%a8%e6%b3%95%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/24\/css-place-items-center%e8%a7%a3%e6%9e%90%e4%b8%8e%e7%94%a8%e6%b3%95%e8%af%a6%e8%a7%a3\/","title":{"rendered":"CSS place-items: center\u89e3\u6790\u4e0e\u7528\u6cd5\u8be6\u89e3"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong><code>place-items: center<\/code> \u7684\u5b8c\u6574\u89e3\u6790\u4e0e\u7528\u6cd5<\/strong>\uff0c\u5e76\u7ed3\u5408\u5b9e\u6218\u793a\u4f8b\u8bf4\u660e\u5b83\u5728 CSS \u5e03\u5c40\u4e2d\u7684\u4f5c\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">CSS <code>place-items: center<\/code> \u89e3\u6790\u4e0e\u7528\u6cd5<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u6982\u5ff5<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>place-items<\/code> \u662f <strong>CSS Grid \u548c\u90e8\u5206 Flexbox \u652f\u6301\u7684\u7b80\u5199\u5c5e\u6027<\/strong>\u3002<\/li>\n\n\n\n<li>\u5b83\u76f8\u5f53\u4e8e\u540c\u65f6\u8bbe\u7f6e\uff1a <code>align-items: ...; \/* \u7eb5\u5411\u5bf9\u9f50 *\/ justify-items: ...; \/* \u6a2a\u5411\u5bf9\u9f50 *\/<\/code><\/li>\n\n\n\n<li>\u8bed\u6cd5\uff1a <code>place-items: &lt;align-items> &lt;justify-items>;<\/code><\/li>\n\n\n\n<li>\u5e38\u89c1\u5199\u6cd5\uff1a <code>place-items: center; \/* \u540c\u65f6\u7eb5\u5411\u5c45\u4e2d\u548c\u6a2a\u5411\u5c45\u4e2d *\/ place-items: start end; \/* align-items: start, justify-items: end *\/<\/code><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u5f53\u53ea\u5199\u4e00\u4e2a\u503c\u65f6\uff0c\u4f1a\u540c\u65f6\u5e94\u7528\u5230 <code>align-items<\/code> \u548c <code>justify-items<\/code>\u3002<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u4f5c\u7528\u8303\u56f4<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e3b\u8981\u7528\u4e8e <strong>Grid \u5e03\u5c40<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u63a7\u5236 <strong>\u5355\u5143\u683c\u4e2d\u5185\u5bb9\u7684\u5bf9\u9f50\u65b9\u5f0f<\/strong>\u3002<\/li>\n\n\n\n<li>\u914d\u5408 <code>display: grid<\/code> \u4f7f\u7528\u6700\u6709\u6548\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u5bf9 <strong>Flexbox<\/strong>\uff0c<code>place-items<\/code> \u7684\u652f\u6301\u53d6\u51b3\u4e8e\u6d4f\u89c8\u5668\uff08\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e2d\u90e8\u5206\u652f\u6301\uff0c\u4f46\u5efa\u8bae\u4f7f\u7528 <code>align-items<\/code> \u548c <code>justify-content<\/code> \u4ee3\u66ff\uff09\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u8bed\u6cd5\u793a\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u57fa\u672c\u5c45\u4e2d<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div class=&quot;grid&quot;&gt;\n  &amp;lt;div class=&quot;item&quot;&gt;\u5185\u5bb9&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;style&gt;\n.grid {\n  display: grid;\n  width: 300px;\n  height: 200px;\n  background: #f0f0f0;\n  place-items: center; \/* \u6a2a\u5411+\u7eb5\u5411\u5c45\u4e2d *\/\n  border: 1px solid #ccc;\n}\n.item {\n  background: #4caf50;\n  color: white;\n  padding: 20px;\n  border-radius: 8px;\n}\n&amp;lt;\/style&gt;\n\n<\/pre><\/div>\n\n\n<p><strong>\u6548\u679c<\/strong>\uff1a<code>.item<\/code> \u5728 <code>.grid<\/code> \u4e2d <strong>\u6c34\u5e73\u548c\u5782\u76f4\u540c\u65f6\u5c45\u4e2d<\/strong>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5355\u72ec\u63a7\u5236\u5bf9\u9f50<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* \u7eb5\u5411\u9876\u90e8 + \u6a2a\u5411\u5c45\u4e2d *\/\n.grid {\n  display: grid;\n  place-items: start center;\n}\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u7b2c\u4e00\u4e2a\u503c \u2192 <code>align-items<\/code>\uff08\u7eb5\u5411\uff09<\/li>\n\n\n\n<li>\u7b2c\u4e8c\u4e2a\u503c \u2192 <code>justify-items<\/code>\uff08\u6a2a\u5411\uff09<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5bf9\u6bd4 align-items \/ justify-items<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* \u7b49\u4ef7\u5199\u6cd5 *\/\n.grid {\n  display: grid;\n  align-items: center;   \/* \u7eb5\u5411\u5c45\u4e2d *\/\n  justify-items: center; \/* \u6a2a\u5411\u5c45\u4e2d *\/\n}\n\n\/* \u4f7f\u7528 place-items *\/\n.grid {\n  display: grid;\n  place-items: center;   \/* \u7b80\u5199\u7b49\u6548 *\/\n}\n\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><code>place-items<\/code> \u662f\u7b80\u5199\u5c5e\u6027\uff0c\u51cf\u5c11\u91cd\u590d\u4e66\u5199\uff0c\u63d0\u9ad8\u53ef\u8bfb\u6027\u3002<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 \u8fdb\u9636\u5e94\u7528<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u591a\u5355\u5143\u683c\u5e03\u5c40<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div class=&quot;grid-2x2&quot;&gt;\n  &amp;lt;div&gt;1&amp;lt;\/div&gt;\n  &amp;lt;div&gt;2&amp;lt;\/div&gt;\n  &amp;lt;div&gt;3&amp;lt;\/div&gt;\n  &amp;lt;div&gt;4&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;style&gt;\n.grid-2x2 {\n  display: grid;\n  grid-template-columns: repeat(2, 100px);\n  grid-template-rows: repeat(2, 100px);\n  place-items: center; \/* \u6bcf\u4e2a\u5355\u5143\u683c\u5185\u5bb9\u5c45\u4e2d *\/\n  gap: 10px;\n  background: #eee;\n}\n.grid-2x2 div {\n  background: #2196f3;\n  color: #fff;\n  width: 60px;\n  height: 60px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 6px;\n}\n&amp;lt;\/style&gt;\n\n<\/pre><\/div>\n\n\n<p><strong>\u6548\u679c<\/strong>\uff1a\u6bcf\u4e2a\u683c\u5b50\u91cc\u7684\u5185\u5bb9\u90fd\u5728 <strong>\u4e2d\u5fc3\u4f4d\u7f6e<\/strong>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 \u603b\u7ed3\u4e0e\u5efa\u8bae<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5c5e\u6027<\/th><th>\u4f5c\u7528<\/th><th>\u9002\u7528\u573a\u666f<\/th><\/tr><\/thead><tbody><tr><td>place-items<\/td><td>\u7b80\u5199 <code>align-items + justify-items<\/code>\uff0c\u63a7\u5236\u5355\u5143\u683c\u4e2d\u5185\u5bb9\u5bf9\u9f50<\/td><td>Grid \u5e03\u5c40\uff0c\u5355\u5143\u683c\u5c45\u4e2d\u6216\u81ea\u5b9a\u4e49\u5bf9\u9f50<\/td><\/tr><tr><td>align-items<\/td><td>\u7eb5\u5411\u5bf9\u9f50<\/td><td>Grid\/Flexbox<\/td><\/tr><tr><td>justify-items<\/td><td>\u6a2a\u5411\u5bf9\u9f50<\/td><td>Grid<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u2705 <strong>\u6700\u4f73\u5b9e\u8df5<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Grid \u5e03\u5c40<\/strong>\u4e2d\u7528 <code>place-items<\/code>\uff0c\u7b80\u6d01\u9ad8\u6548\u3002<\/li>\n\n\n\n<li><strong>\u5355\u5143\u683c\u5185\u5bb9\u9700\u8981\u540c\u65f6\u5c45\u4e2d<\/strong>\u65f6\u9996\u9009\u3002<\/li>\n\n\n\n<li>\u5bf9 <strong>Flexbox<\/strong>\uff0c\u5efa\u8bae\u7528 <code>align-items<\/code> + <code>justify-content<\/code> \u4ee5\u4fdd\u8bc1\u517c\u5bb9\u6027\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd place-items: center \u7684\u5b8c\u6574\u89e3\u6790\u4e0e&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/24\/css-place-items-center%e8%a7%a3%e6%9e%90%e4%b8%8e%e7%94%a8%e6%b3%95%e8%af%a6%e8%a7%a3\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-164","post","type-post","status-publish","format-standard","hentry","category-css"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/164\/revisions"}],"predecessor-version":[{"id":165,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/164\/revisions\/165"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}