1. 内聯元素

要使内聯元素（如鍊接，span 或img）居中，使用 text-align: center 足夠了。

<div class="desk"> <span class="plate"></span> </div>

.desk { text-align: center; }

對于多個内聯元素，也可以使用text-align：center:

<div class="desk"> <span class="plate"></span> <span class="plate"></span> </div>

.desk { text-align: center; }

2. Flexbox

使用 flexbox 也可以快速居中元素：

.desk { display: flex; justify-content: center; }

對于多個内聯的項目，也可以正常工作：

3. CSS Grid

使用網格容器時，圖中的盤子将根據其網格區域居中。 請注意，除非将它們包裹在一個元素中，否則這将不适用于多個盤子。

.desk { display: grid; justify-content: center; }

1. Auto Margin

寬度和高度已知的塊元素可以通過設置margin-left:auto 和 margin-right:auto 居中元素。

.plate { width: 120px; height: 120px; margin:0 auto; }

對于多個塊元素，它們應該包裝在一個元素中，然後讓這個父元素居中。

.tray { display: flex; margin-left: auto; margin-right: auto; }

2. Flexbox

對于 flexbox 同樣也是使用 justify-content:center 來居中元素：

.desk { display: flex; justify-content: center; }

對于多個元素，我們不需要将它們包裹在一個元素中，flexbox 可以将它們都居中。

通過絕對定位，我們可以輕松地通過CSS transform将其水平居中。

.plate { position: absolute; left: 50%; transform: translateX(-50%); }

在已知元素寬度的情況下，可以使用負邊距代替CSS transform。

.plate { position: absolute; left: 50%; margin-left: -60px; } 複制代碼

一、内聯元素

1. Vertical Padding

垂直居中元素最簡單的方法之一是使用padding:

padding-top: 24px; padding-bottom: 24px; }

2. Vertical Align

vertical-align屬性可用于一個或多個元素。

在此示例中，叉子和刀子應與桌子垂直居中。

.desk { text-align: center; } .plate, .fork, .knife { vertical-align: middle; }

3. Flexbox

為了對齊盤子，叉子和刀，我們可以使用 flexbox:

.desk { display: flex; justify-content: center; align-items: center; }

1. 絕對定位

通過絕對定位元素，可以使用 CSS transform将元素垂直居中：

.plate { position: absolute; top: 50%; transform: translateY(-50%); }

如果知道元素高度，則可以使用負邊距代替transform。

.plate { position: absolute; top: 50%; margin-top: -60px; }

使用CSS網格，我們可以使用align-items将項目垂直于其網格區域居中。

.desk { display: grid; align-items: center; }

一、内聯元素

1. Padding 和Text Align

.plate { text-align: center; padding-top: 24px; padding-bottom: 24px; }

絕對定位

.plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

通過 justify-content:center 和 align-items:center 就可以将元素垂直水平居中：

.plate { display: flex; justify-content: center; align-items: center; }

通過place-items屬性就可以通過，它結合了justify-content和align-items:

.desk { display: grid; place-items: center; }

本文轉載自網絡，僅供大家學習！

感謝您的閱讀，如果對您有幫助，歡迎關注"CRMEB"頭條号。碼雲上有我們開源的商城項目，知識付費項目，均是基于PHP vue開發，學習研究歡迎使用，關注我們保持聯系！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!