如何優(yōu)雅地在CSS中實(shí)現(xiàn)分頁(yè)居中

在CSS中，我們可以通過使用flexbox或者grid布局來優(yōu)雅地實(shí)現(xiàn)分頁(yè)居中，下面，我們將使用flexbox布局來演示如何實(shí)現(xiàn)。

我們需要?jiǎng)?chuàng)建一個(gè)包含所有分頁(yè)按鈕的容器，這個(gè)容器將使用flexbox布局，這樣我們就可以輕松地將按鈕居中。

HTML結(jié)構(gòu)如下：

<div class="pagination">
  <a href="#" class="page-button">1</a>
  <a href="#" class="page-button">2</a>
  <a href="#" class="page-button">3</a>
  <a href="#" class="page-button">4</a>
  <a href="#" class="page-button">5</a>
  <a href="#" class="page-button">6</a>
  <a href="#" class="page-button">7</a>
  <a href="#" class="page-button">8</a>
  <a href="#" class="page-button">9</a>
  <a href="#" class="page-button">10</a>
  <div class="page-separator">...</div>
  <a href="#" class="page-button">Next</a>
  <a href="#" class="page-button">Last</a>
</div>

我們使用CSS來設(shè)置容器的樣式，使其居中顯示，我們可以使用justify-content屬性來將按鈕居中，并使用align-items屬性來確保按鈕在垂直方向上也是居中的。

CSS樣式如下：

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px; /* 可以根據(jù)需要調(diào)整高度 */
}
.page-button {
  margin: 0 5px; /* 可以根據(jù)需要調(diào)整按鈕間的間距 */
}
.page-separator {
  margin: 0 10px; /* 可以根據(jù)需要調(diào)整分隔符的間距 */
}

我們的分頁(yè)按鈕已經(jīng)被優(yōu)雅地居中顯示了，我們可以根據(jù)需要進(jìn)一步調(diào)整容器的樣式和按鈕的樣式來滿足具體的需求。