使用CSS Grid实现页面内容居中对齐的方法

问题根源 #

你当前的布局问题来自两个关键设置：

1. .main-content 中的 margin-right: 175px 是导致内容偏右的直接原因，这个强制外边距把主内容往左侧推的视觉效果其实是错误的偏移。
2. mid-container 作为Grid容器，未明确定义列宽规则，导致导航栏和主内容的布局逻辑模糊，无法实现紧密贴合的效果。

修复步骤 #

1. 移除冗余偏移样式

直接删除 .main-content 里的 margin-right: 175px，这会立刻消除内容偏右的问题。

2. 优化Grid容器布局逻辑

修改 mid-container 的样式，明确列宽规则并让容器自身在页面中居中：

.mid-container {
    display: grid;
    grid-template-areas: 
    'main-nav main-content';
    grid-template-columns: auto 1fr; /* 导航栏自适应内容宽度，主内容占剩余空间 */
    gap: 0; /* 消除导航与主内容之间的间隙 */
    max-width: 900px; /* 限制整体宽度，避免大屏下内容过宽 */
    margin: 0 auto; /* 让容器水平居中 */
}

这里把原Grid区域定义里的重复main-content去掉，因为grid-template-columns: auto 1fr已经明确了两列分配规则；auto让导航栏根据自身链接文本自动调整宽度，1fr确保主内容填满剩余空间，两者自然紧密贴合。

3. 优化全局容器（可选）

如果希望整个页面内容（包括顶部标题）都保持居中对齐，可调整.wrapper的样式，避免Grid布局可能带来的意外影响：

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem; /* 小屏幕下添加左右内边距，避免内容贴边 */
}

修改后的完整CSS代码 #

:root {
    --primary: #FFF5E6;
    --dark: #E5DBB7;
    --darker: #CAC198;
    --red: #D32929;
    --yellow: #FACD1E;
    --darkerRed: #7F2122;
    --black: #333;
}

@font-face {
    font-family: 'Caesar', sans-serif;
    src: url(CAESAR.TTF);
}

html {
    box-sizing: border-box;
    color: var(--black);
}

body {
    background: var(--primary);
    margin: 0; /* 移除浏览器默认body外边距 */
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.mid-container {
    display: grid;
    grid-template-areas: 
    'main-nav main-content';
    grid-template-columns: auto 1fr;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

.main-nav ul{
    display: grid;
    grid-gap:0px;
    padding: 0;
    margin: 0;
    list-style: none;
    grid-template-columns: 1fr;
}

.main-nav a {
    background: var(--darkerRed);
    display: block;
    text-decoration: none;
    text-align: left;
    padding: 0.8rem;
    color: whitesmoke;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-family: "Caesar";
}

.main-nav a:hover{
    background: var(--yellow);
    color: var(--black);
}

.main-nav {
    grid-area: main-nav; 
}

.main-content {
    grid-area: main-content;
    background: var(--dark);
    padding: 1.6rem;
    font-family: "Caesar";
    max-width: 700px;
}

.main-content img {
    width: 150px;
    float: right; 
    margin-left: 0.5rem;
}

.top-container h1 {
    text-align: center;
    font-family: 'Caesar';
    font-size: 56px;
    color: var(--red);
    margin-top: 0;
}

.top-container h3 {
    text-align: center;
    font-family: 'Caesar';
    font-size: 48px;
    color: var(--red);
    margin-top: 0;
}

.footer {
    text-align: center;
    color: var(--red);
}

最终效果 #

• 主内容区域在页面中水平居中，不再偏移
• 导航栏根据自身内容自动调整宽度，与主内容侧边完全贴合
• 小屏幕下添加了左右内边距，避免内容贴边影响体验

内容的提问来源于stack exchange，提问作者Axel Görnebrand