CSS Flexbox: 如何使元素在頁面中居中顯示

CSS flexbox是一個非常流行的CSS布局模式，使得在頁面中讓元素居中顯示變得更為簡單。在這篇文章中，我們將詳細介紹如何使用flexbox在網頁中居中元素。我們將涵蓋以下內容：

一、 使用flexbox在頁面中水平居中元素

在這個例子中，我們有一個具有類名「my-flex-container」的外部容器，它包含一個具有類名「my-flex-item」的子元素。

.my-flex-container {
  display: flex;
  justify-content: center;
}

.my-flex-item {
  width: 200px;
}

在這段CSS代碼中，我們首先將外部容器的display屬性設置為「flex」，以啟用flexbox。隨後我們使用justify-content:center，以在水平方向上居中元素。

該例子的HTML代碼如下：

<div class="my-flex-container">
  <div class="my-flex-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

該代碼將使子元素在水平方向上居中顯示。

二、使用flexbox在頁面中垂直居中元素

使用flexbox在頁面中垂直居中元素是非常類似的。在這個例子中，我們有一個具有類名「my-flex-container」的外部容器，它包含一個具有類名「my-flex-item」的子元素。

.my-flex-container {
  display: flex;
  align-items: center;
  height: 100vh;
}

.my-flex-item {
  width: 200px;
}

在這段CSS代碼中，我們首先將外部容器的display屬性設置為「flex」，使用align-items:center，以將元素垂直居中，並使用height:100vh屬性將外部容器的高度設置為當前視口高度。

該例子的HTML代碼如下：

<div class="my-flex-container">
  <div class="my-flex-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

該代碼將使子元素在垂直方向上居中顯示。

三、使用flexbox在頁面中水平和垂直居中元素

如果您需要同時水平和垂直居中元素，則可以使用以下CSS代碼：

.my-flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.my-flex-item {
  width: 200px;
}

在這段CSS代碼中，我們使用display:flex屬性，設置外部容器為flexbox。我們使用justify-content:center屬性將元素在水平方向上居中，使用align-items:center屬性使元素在垂直方向上居中，並使用height:100vh屬性將外部容器的高度設置為當前視口高度。

該例子的HTML代碼如下：

<div class="my-flex-container">
  <div class="my-flex-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

該代碼將使子元素在頁面中水平和垂直方向上居中顯示。

四、使用flexbox在頁面中居中多個元素

如果您需要將多個元素居中顯示，則必須在外部容器中放置這些元素。

.my-flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.my-flex-item {
  width: 200px;
  margin: 0 10px;
}

在這段CSS代碼中，我們使用display:flex屬性，設置外部容器為flexbox。我們使用justify-content:center屬性將元素在水平方向上居中，使用align-items:center屬性使元素在垂直方向上居中，並使用height:100vh屬性將外部容器的高度設置為當前視口高度。因為我們有多個元素，所以我們還使用margin:0 10px屬性為每個元素添加了一個小空白間距。

該例子的HTML代碼如下：

<div class="my-flex-container">
  <div class="my-flex-item">
    <p>Element 1</p>
  </div>
  <div class="my-flex-item">
    <p>Element 2</p>
  </div>
  <div class="my-flex-item">
    <p>Element 3</p>
  </div>
</div>

該代碼將使多個子元素在頁面中水平和垂直方向上居中顯示。