Bootstrap 5 中 Card-body 容器内居中放置 Input 元素

<p>&quot;Bootstrap 5 中 Card-body 容器内居中放置 Input 元素&quot; &quot;本文介绍了两种在 Bootstrap 5 中将 input 元素水平居中放置在 card-body 容器内的方案：使用 Bootstrap 内置类名 d-flex 和 justify-content-center，以及使用 CSS 的 Flexbox 属性。&quot; &quot;&quot;Bootstrap 5 中 Card-body 容器内居中放置 Input 元素&quot;&quot; &quot;在 Bootstrap 5 中，您可以使用以下方法将 input 元素居中放置在 card-body 中：&quot; &quot;1. 使用 Bootstrap 的内置类名 &quot;d-flex&quot; 和 &quot;justify-content-center&quot; 来创建一个水平居中的容器。&quot; &quot;&quot;`&lt;div class=&quot;card-body d-flex justify-content-center&quot;&gt;\n  `&lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;\n&lt;/div&gt;&quot;&quot; &quot;2. 使用 CSS 的 Flexbox 属性来实现居中对齐。&quot; &quot;&quot;`<style>\n  .card-body {\n    display: flex;\n    justify-content: center;\n  }\n</style>\n`&lt;div class=&quot;card-body&quot;&gt;\n  `&lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;\n&lt;/div&gt;&quot;&quot; &quot;无论您选择哪种方法，都会将 input 元素水平居中放置在 card-body 中。请根据您的需求选择合适的方法进行布局。&quot;</p>