如何使用CSS实现文本向下居中对齐？

AI 小北

2026-8-7

解决文本向下并居中对齐的问题

你的代码存在两个核心问题：

top: 60px 不生效——元素默认是static定位，该定位模式下top属性无法发挥作用
仅实现了水平居中，未处理垂直方向的居中/向下对齐需求

下面提供两种实用解决方案：

方法一：Flex布局（推荐，代码最简洁）

Flex是现代CSS布局的首选方案，能轻松实现元素的水平+垂直居中，同时通过margin-top让容器整体向下偏移：

* {
    margin: 0;
    padding: 0;
}

.context {
    color: white;
    background-color: #201dd6;
    width: 60%;
    height: 900px;
    /* 让容器整体向下偏移60px */
    margin-top: 60px;
    /* 让容器自身水平居中（按需保留） */
    margin-left: auto;
    margin-right: auto;
    /* 开启flex布局，实现内部文本水平+垂直居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

方法二：定位+Transform（兼容老浏览器）

如果需要兼容不支持Flex的老浏览器，可以采用定位方案：

* {
    margin: 0;
    padding: 0;
}

.context {
    color: white;
    background-color: #201dd6;
    width: 60%;
    height: 900px;
    /* 开启相对定位，让top属性生效 */
    position: relative;
    top: 60px;
    /* 容器自身水平居中（按需保留） */
    margin: 0 auto;
    /* 文本水平居中 */
    text-align: center;
}

/* 让内部文本垂直居中 */
.context > * {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 平移自身的50%，实现完美居中 */
    transform: translate(-50%, -50%);
    width: 100%; /* 确保文本换行后仍保持水平居中 */
}