如何实现网站在全设备上的响应式水平垂直居中？

问题分析 #

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

• 使用transform: translateY(百分比)定位元素，这个百分比是基于元素自身高度计算的，不同屏幕下文字大小变化会导致元素高度改变，最终位置完全失控，这就是不同设备显示异常的原因。
• 之前尝试flex布局没生效，大概率是没给html和body设置满视口高度，flex容器没有足够空间完成居中逻辑。

修改后的完整代码 #

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOU CAN DO IT!</title>

    <style>
        /* 核心：让html和body占满整个视口高度 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
            /* 使用flex实现全局垂直+水平居中 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 小屏幕下内容避免贴边 */
            padding: 2rem;
            box-sizing: border-box;
        }

        p {
            color: white;
            margin-top: 1.5rem; /* 两段文字设置间距 */
            max-width: 80%; /* 小屏幕下文字不撑满宽度 */
        }

        #main-text {
            font-size: 40px;
            font-weight: bold;
            font-family: monospace;
            color: white;
            animation: pulse 1.5s infinite linear;
        }

        /* 响应式调整字体大小 */
        @media screen and (min-width: 600px) {
            #main-text {
                font-size: 60px;
            }
        }

        @media screen and (min-width: 900px) {
            #main-text {
                font-size: 80px;
            }
        }

        @keyframes pulse {
            0% { color: white; }
            12.5% { color: red; }
            25% { color: orange; }
            37.5% { color: yellow; }
            50% { color: green; }
            62.5% { color: blue; }
            75% { color: indigo; }
            87.5% { color: violet; }
            100% { color: white; }
        }
    </style>
</head>

<body>
    <div id="main-text">
        YOU ARE UNSTOPPABLE!
    </div>
    <p>(Never give up, you have the power to succeed! You're amazing!)</p>
</body>

关键修改说明 #

• 设置视口高度：给html和body添加height: 100%，同时清除默认margin和padding，确保flex容器覆盖整个屏幕。
• flex布局居中：body设置display: flex，flex-direction: column让内容垂直排列，align-items: center实现水平居中，justify-content: center实现垂直居中，这是跨设备最稳定的居中方案。
• 移除transform定位：彻底删掉所有transform: translateY，避免和flex布局冲突，解决不同屏幕下位置混乱的问题。
• 优化响应式细节：给p标签添加max-width避免小屏幕文字过宽；添加margin-top保持两段文字间距；body加padding防止内容在极小屏幕下贴边。

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