最近，Chrome 123又悄悄推出了一個(gè)CSS新特性，那就是align-content支持普通的block容器了！那么，這個(gè)特性有什么用呢？一起來(lái)了解一下吧！

一、過(guò)去只對(duì) flex 和 grid 生效

align-content相信大家都聽(tīng)說(shuō)過(guò)，但是之前只能在 flex 和 grid容器上才能生效。這里以flex為例，比如有這樣一個(gè)布局。

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

簡(jiǎn)單修飾一下。

.flex{
  display: flex;
  width: 400px;
  height: 300px;
  outline: 1px dashed #9747FF;
  align-content: center;
}
.item{
  display: inline-flex;
  width: 80px;
  margin: 10px;
  aspect-ratio: 1/1;
  background: #FFE8A3;
  color: #333;
  font-size: 30px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}

效果如下：

圖片

好像沒(méi)生效？這是因?yàn)閍lign-content針對(duì)的是多行，控制臺(tái)其實(shí)已經(jīng)有提示了。

圖片

所以，這里需要加上換行屬性。

.flex{
  /**/
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

這樣就生效了。

圖片

有人可能會(huì)想到align-items:center，可能大部分情況我們都是用的這個(gè)屬性來(lái)實(shí)現(xiàn)垂直居中，有什么區(qū)別呢？這里不妨來(lái)試試。

.flex{
  /**/
  display: flex;
  flex-wrap: wrap;
  /*align-content: center;*/
  align-items:center
}

效果如下：

圖片

好像看不出有什么是居中的？這是因?yàn)閌`align-items`針對(duì)的是單行的，我們讓每個(gè)元素的高度不一致就能看出來(lái)了。

圖片

為啥兩行的間距這么大呢？這是因?yàn)閍lign-content默認(rèn)是stretch，會(huì)自動(dòng)充滿(mǎn)整個(gè)空間，如果設(shè)置成``align-content:end`就能看出效果了。

圖片

簡(jiǎn)單總結(jié)一下：

• align-items 設(shè)置每一行的對(duì)齊方式
• align-content 設(shè)置多行整體的對(duì)齊方式

圖片

具體的很多細(xì)節(jié)，網(wǎng)上有很多教程，大家可以自己去查閱，這里就不多介紹了。

二、普通塊級(jí)元素的 align-content 的特性

這里說(shuō)的塊級(jí)元素其實(shí)指的是除inline元素之外的元素，大家可以在控制臺(tái)查看。

圖片

有了這個(gè)特性，垂直居中將變得異常簡(jiǎn)單，比如：

<div class="con">歡迎關(guān)注前端偵探</div>

設(shè)置align-content:center：

.con{
  border-radius: 4px;
  padding: 10px;
  width: 100px;
  height: 100px;
  background: #FFD75A;
  align-content: center;
}

效果如下：

圖片

如果是多行塊級(jí)文本：

<ol class="con">
  <li>歡迎</li>
  <li>關(guān)注</li>
</ol>

也能完美垂直居中。

圖片

當(dāng)然這些用flex布局也能實(shí)現(xiàn)，只是稍微麻煩一點(diǎn)。

三、textarea 也能實(shí)現(xiàn)垂直居中

最近在項(xiàng)目中碰到這樣一個(gè)需求，需要在輸入多行文本時(shí)，默認(rèn)是居中的，超出后才正常滾動(dòng)。

圖片

難點(diǎn)就在于垂直居中，因?yàn)閠extarea是可替換元素，即使設(shè)置 flex也無(wú)法實(shí)現(xiàn)內(nèi)部文本垂直居中，現(xiàn)在有了align-content就好辦了，如下：

textarea{
  align-content: center;
}

效果如下：

圖片

以上所有 demo 可以查看以下鏈接（Chrome 123+）：

• CSS align-content (juejin.cn)[1]
• CSS align-content (codepen.io)[2]

四、總結(jié)一下

一個(gè)比較不錯(cuò)的新特性，你學(xué)到了嗎？下面總結(jié)一下：

1. align-content 之前只在 flex 和 grid 容器中生效
2. align-items 用于設(shè)置每一行的對(duì)齊方式
3. align-content 用于設(shè)置多行整體的對(duì)齊方式
4. 現(xiàn)在普通塊級(jí)元素也支持 align-content 特性了，可以非常方便實(shí)現(xiàn)垂直居中效果
5. align-content 還支持textarea文本輸入垂直居中

參考資料：

[1]CSS align-content (juejin.cn)： https://code.juejin.cn/pen/7360209107388727306

[2]CSS align-content (codepen.io)： https://codepen.io/xboxyan/pen/gOyQqwZ