CSS中的align-content属性：实现垂直居中的新方式

引言

在CSS的漫长发展历程中，垂直居中一直是一个令人头疼的问题。不过，好消息是，到了2024年，CSS终于引入了一种新的方式来实现垂直居中，那就是使用align-content属性。本文将详细介绍align-content的使用方式，并对比之前常见的垂直居中方法，帮助你更好地理解和应用这一新特性。

align-content属性简介

在CSS中，align-content属性原本主要用在Flexbox和Grid布局中，用于控制交叉轴（cross
axis）上内容的对齐方式。但在2024年，浏览器开始支持在默认布局（flow
layout）中使用align-content，从而实现了使用单一CSS属性即可实现垂直居中的效果。

示例代码

使用align-content进行垂直居中的简单示例如下：

1.单行内容：

<div style="height:300px;border: 5px solid #f00;align-content: center;">
  <div style