class为about-me的文本无法居中，多种CSS方案无效求助

问题出在你给.about-me设置了position: absolute，但没配置水平居中的关键属性，以下两种方法都能解决：

方法一：利用transform偏移实现精准居中 #

修改.about-me的CSS代码：

.about-me {
    position: absolute;
    top: 110%;
    left: 50%; /* 将元素左边缘定位到页面水平中点 */
    transform: translateX(-50%); /* 向左偏移自身宽度的50%，让元素整体居中 */
    text-align: center; /* 确保文本在元素内部居中（可选，短文本不设也不影响，但建议保留） */
}

方法二：设置宽度占满页面实现文本居中 #

如果希望元素宽度铺满整个页面，让文本在页面水平居中，可这样写：

.about-me {
    position: absolute;
    top: 110%;
    width: 100%; /* 让元素宽度覆盖整个页面 */
    text-align: center; /* 文本在元素内部居中，等同于页面水平居中 */
}

为什么之前的方法无效？ #

• display: flex和justify-content: center是父容器的属性，作用于子元素，直接给自身设置这些属性不会生效。
• margin-left: auto; margin-right: auto仅对非绝对定位的块级元素有效，且需要元素有明确宽度（或默认块级宽度），而position: absolute会让元素脱离文档流，这个方法不再适用。

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