如何不使用flex/grid及媒体查询实现元素居中且宽度不随页面缩放

架构老林

2026-8-29

问题原代码

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins";
}
body{
    background-color: rgb(214, 255, 255);
}
.article:nth-child(3){
    background-color: white;
}
.article:nth-child(5){
    background-color: white;

}
.container{
    margin: 0 auto;
    width: fit-content;
}
.article:nth-child(1){
    color: white;
    background-color: purple;
}
.article:nth-child(2){
    background-color: #222;
    color: white;
}
.article:nth-child(4){
    background-color: rgb(0, 2, 37);
    color: white;
}
.article{
    font-weight: 800;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    width: 45%;
}
</style>
<body>
    <div class="container">
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
    </div>
</body>
</html>

实现要求

禁止使用flex、grid布局属性
禁止使用媒体查询
实现.article元素在页面水平居中
元素宽度不会随页面尺寸缩小，同时兼顾基础响应式效果，避免小屏下出现横向滚动条

问题原因

原代码无法达到预期的核心原因有两个：

父容器.container设置width: fit-content后，宽度完全由子元素撑开，子元素设置的width: 45%属于百分比宽度，依赖父元素尺寸计算，此时没有稳定的参考尺寸，宽度渲染逻辑混乱。
子元素使用百分比宽度，本身就会随父容器（视口）尺寸变化自动缩放，不符合“宽度不随页面尺寸缩小”的要求。

解决方案

使用传统块级盒模型特性即可实现需求，完全不需要用到禁用属性：

块级元素默认支持margin: 0 auto实现水平居中，无需flex/grid加持
给.article设置固定宽度值，保证大屏下宽度不会随视口缩放改变
搭配max-width: 100%属性，小屏下元素会自动适配容器宽度，不会溢出视口产生横向滚动条，无需媒体查询即可实现基础响应式
父容器设置最大宽度+左右内边距，避免大屏下内容过宽分散，同时防止小屏下内容直接贴住浏览器边缘

修正后完整代码

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins";
}
body{
    background-color: rgb(214, 255, 255);
}
.article:nth-child(1){
    color: white;
    background-color: purple;
}
.article:nth-child(2){
    background-color: #222;
    color: white;
}
.article:nth-child(3){
    background-color: white;
}
.article:nth-child(4){
    background-color: rgb(0, 2, 37);
    color: white;
}
.article:nth-child(5){
    background-color: white;
}
.container{
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 16px;
}
.article{
    font-weight: 800;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    /* 固定基础宽度，大屏下不会随页面缩放改变尺寸 */
    width: 540px;
    /* 小屏下自动适配容器宽度，不会溢出视口 */
    max-width: 100%;
    /* 块级元素水平居中，添加上下间距拉开卡片距离 */
    margin: 16px auto;
}
</style>
<body>
    <div class="container">
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div class="article">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
    </div>
</body>
</html>

可以根据实际设计需求调整.article的固定宽度值、容器最大宽度和内边距数值，适配不同的设计稿尺寸。

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