当前位置：首页 > news >正文

前端css学习笔记7：各种居中布局空白问题

news 2025/8/19 8:58:06

本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！

前言

一、居中

1．行内元素、行内块元素

2.如何让子元素，在父亲中水平居中：

3.如何让子元素，在父亲中垂直居中：

4.使用定位+margin

5.flex布局

6.子元素高度未知，实现其在父元素的居中

7.父元素高度未知，实现其子元素在父元素的居中

二、空白

1.元素之间空白问题

2.行内块元素的空白问题

前言

在网页布局与样式设计中，元素的精准定位和空白空间的合理处理是构建美观、整洁界面的核心环节。无论是让按钮、卡片等元素在容器中完美居中，还是消除元素间不必要的空白、避免布局错乱，都直接影响着用户的视觉体验和页面的专业性。本文将围绕 “居中” 和 “空白” 两大关键主题展开，希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。

网课链接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39

一、居中

下面情况（1-5）的前提是父元素有高度

1,2,3——常规布局（都在文档流，不使用定位）

1．行内元素、行内块元素

可以被父元素当做文本处理

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等。
（在其父元素中设置text-align）水平居中：text-align:center

2.如何让子元素，在父亲中水平居中：

若子元素为块元素，给父元素加上：margin:0 auto；。（上下为0，左右自动）
若子元素为行内元素、行内块元素，给父元素加上：text-align:center。

3.如何让子元素，在父亲中垂直居中：

若子元素为块元素，给子元素加上：margin-top，值为：（父元素content－子元素盒子总高）／2
若子元素为行内元素、行内块元素：让父元素的height=line-height，每个子元素都加上：vertical-align:middle；补充：若想绝对垂直居中，父元素font-size设置为0。

4.使用定位+margin

给父元素开启相对定位（position：relative），子元素开启绝对定位（position：absolute）
子元素设置上下左右的值为0（top: 0;bottom: 0; left: 0; right: 0;），设置定位必有这几个值
再给子元素设置margin：auto

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>.outer{width: 400px;height: 300px;background-color: grey;position: relative;}.box{width: 100px;height: 100px;}.box1{background-color: skyblue;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style>
</head>
<body><!-- 浮动实现居中 --><div class="outer"><div class="box box1">1</div><!-- <div class="box box2">2</div><div class="box box3">3</div> --> </div> 
</body> 
</html>

5.flex布局

法1：父元素开启flex（display：flex），使用justify-content和align-items属性都是center

.parent { display: flex; justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */width: 100%; height: 300px; border: 1px solid #ccc; 
}
.child { width: 200px; 
}

法2：父元素flex（display：flex），子元素直接margin：auto（不再给父元素使用justify-content和align-items属性）

6.子元素高度未知，实现其在父元素的居中

.parent { position: relative; width: 100%; height: 300px; border: 1px solid #ccc; 
}
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 通过负偏移修正 */}

7.父元素高度未知，实现其子元素在父元素的居中

当父元素高度未知时，其高度通常由自身内容（包括子元素）动态撑开，此时可通过以下方式实现子元素的居中（水平 + 垂直）：

● 方法 1：使用 flex 布局（推荐）

flex 布局的核心优势是容器高度会随内容自适应，即使父元素高度未知，也能通过 flex 属性直接控制子元素的居中对齐。

父元素设置为 flex 容器，通过justify-content（水平方向）和align-items（垂直方向）控制子元素居中。
适用场景：所有子元素类型（块元素、行内元素等），兼容性较好（支持 IE10 + 及现代浏览器）。

.parent {display: flex;          /* 父元素开启flex布局 */justify-content: center; /* 子元素水平居中 */align-items: center;     /* 子元素垂直居中 */width: 400px;           /* 可固定宽度，高度由内容撑开 */border: 1px solid #ccc;
}
.child {width: 100px;height: 100px;background-color: skyblue;
}

● 方法 2：使用 grid 布局

grid 布局与 flex 布局类似，容器高度会随内容自适应，通过网格属性可直接实现子元素居中，语法更简洁。

父元素设置为 grid 容器，通过justify-items（水平）和align-items（垂直）控制子元素居中。
适用场景：现代浏览器（支持 IE11+），适合复杂布局场景。

.parent {display: grid;           /* 父元素开启grid布局 */justify-items: center;   /* 子元素水平居中 */align-items: center;     /* 子元素垂直居中 */width: 400px;border: 1px solid #ccc;
}
.child {width: 100px;height: 100px;background-color: skyblue;
}

● 方法 3：表格布局（兼容性优先）

通过模拟表格结构，利用表格单元格的对齐特性实现居中，兼容性极佳（支持低版本浏览器），但语义化较弱。

父元素设置为table-cell，配合vertical-align: middle（垂直）和text-align: center（水平）；
需在外层嵌套display: table的容器，确保表格布局生效。

/* 外层容器模拟表格 */
.table-wrap {display: table;width: 400px;border: 1px solid #ccc;
}
.parent {display: table-cell;     /* 父元素模拟表格单元格 */vertical-align: middle;  /* 子元素垂直居中 */text-align: center;      /* 子元素水平居中（适用于行内/行内块元素） */
}
.child {display: inline-block;   /* 块元素需转为行内块，配合text-align */width: 100px;height: 100px;background-color: skyblue;
}