Bootstrap 居中：快速實現水平和垂直居中

Bootstrap 中實現居中的方法如下：水平居中：文本：添加.text-center 類塊元素：添加.mx-auto 類垂直居中：行內元素：添加.align-self-center 類塊元素：使用d-flex 和.align-items-center 類使用vh-100 和.align-content-center 類

在Bootstrap 中實現居中：水平和垂直

什麼是居中？

居中是指將元素水平或垂直地放置在其容器的正中央。在Web 設計中，居中元素可以增強視覺吸引力並創建平衡感。

使用Bootstrap 實現水平居中

水平居中文本：

• 添加.text-center類到文本容器

水平居中塊元素：

• 添加.mx-auto類到塊元素。這將自動為塊元素添加margin: 0 auto;屬性，以實現水平居中。

使用Bootstrap 實現垂直居中

垂直居中行內元素：

• 添加.align-self-center類到行內元素

垂直居中塊元素：

• 添加.d-flex類到容器，再添加.align-items-center類到塊元素或
• 添加.vh-100類到容器，再添加.align-content-center類到塊元素，並為塊元素設置最小高度

示例：

 <code class="html"><!-- 水平居中文本--> <p class="text-center">居中的文本</p> <!-- 水平居中块元素--> <div class="mx-auto" style="width: 200px; height: 100px;">居中的块元素</div> <!-- 垂直居中行内元素--> <div class="d-flex justify-content-center"> <span class="align-self-center">居中的行内元素</span> </div> <!-- 垂直居中块元素（使用d-flex） --> <div class="d-flex flex-column vh-100 align-items-center"> <div style="width: 200px; height: 100px;">居中的块元素</div> </div> <!-- 垂直居中块元素（使用vh-100） --> <div class="vh-100"> <div class="align-content-center" style="height: 100px;">居中的块元素</div> </div></code>

以上是Bootstrap 居中：快速實現水平和垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！