利用 Bootstrap 4/5 實現元素居中

在Bootstrap 4/5 中，水平居中元素可以使用text-center 類或mx-auto 類，垂直居中元素在Bootstrap 4 中可以使用d-flex 和align-items-center 類或使用margin: auto; 樣式，而在Bootstrap 5 中可以使用d-grid 和align-content-center 類或使用position: absolute; 和top: 50%; left: 50%; 樣式。

使用Bootstrap 4/5 實現元素居中

在Bootstrap 4/5 中，使用以下方法可以將元素居中：

水平居中

• 使用text-center類： <div class="text-center">...</div>
• 使用mx-auto類（Bootstrap 5）： <div class="mx-auto">...</div>

垂直居中

Bootstrap 4：

• 使用d-flex和align-items-center類： <div class="d-flex align-items-center">...</div>

Bootstrap 5：

• 使用d-grid和align-content-center類： <div class="d-grid align-content-center">...</div>

使用垂直居中的其他方法

• 使用margin: auto;樣式： <div style="margin: auto;">...</div>
• 使用position: absolute;和top: 50%; left: 50%; <div style="position: absolute; top: 50%; left: 50%;">...</div>

示例：

水平居中：

 <code class="html"><div class="text-center"> <h1 id="标题">标题</h1> </div></code>

 <code class="html"><div class="mx-auto"> <button class="btn btn-primary">按钮</button> </div></code>

垂直居中：

Bootstrap 4：

 <code class="html"><div class="d-flex align-items-center"> <h1 id="标题">标题</h1> </div></code>

Bootstrap 5：

 <code class="html"><div class="d-grid align-content-center"> <button class="btn btn-primary">按钮</button> </div></code>

以上是利用 Bootstrap 4/5 實現元素居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！