CSS中align-items:center无法实现垂直居中，求排查原因

你的align-items:center没生效，核心原因是：这个属性是Flexbox布局的容器专属属性，只有当元素被设置为flex容器（display:flex）时，它才会被浏览器识别并生效。现在.head是普通块级元素，该属性完全不起作用，仅text-align:center实现了水平居中。

解决方案 #

1. 给.head容器添加display:flex，让它成为flex容器，此时align-items:center就能正常控制垂直居中；同时可以用justify-content:center替代text-align:center来实现水平居中（两者保留其一即可）。
2. 修复HTML里的<p>标签闭合错误，避免浏览器自动补全标签导致的布局异常。

修改后的代码 #

HTML代码

<div data-aos="fade-in" class="head">
    <p class="head-text">Top Artists and Songs of 2023</p>
</div>

CSS代码

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');

body {
    background-color: #212121;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 0;
}

.head {
    background-color: #111111;
    color: #1d8954;
    filter: brightness(150%);
    width: 100%;
    height: 75vh;
    margin:0;
    display: flex; /* 转为flex容器，激活align-items属性 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中，现在生效 */
}
.head-text {
    font-size: 5rem;
    margin:0;
}

替代方案（Grid布局） #

如果觉得Flex写法麻烦，也可以用Grid布局一行搞定水平+垂直居中：
给.head替换成以下样式：

.head {
    /* 其他属性保留 */
    display: grid;
    place-items: center; /* 同时实现水平、垂直居中 */
}

内容的提问来源于stack exchange，提问作者A potato