本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！
目录
前言
在网页布局与样式设计中，元素的精准定位和空白空间的合理处理是构建美观、整洁界面的核心环节。无论是让按钮、卡片等元素在容器中完美居中，还是消除元素间不必要的空白、避免布局错乱，都直接影响着用户的视觉体验和页面的专业性。本文将围绕 "居中" 和 "空白" 两大关键主题展开，希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。
一、居中
下面情况（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></body> </html>1
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;
} -
优先选择 flex 或 grid 布局，简洁高效且适配现代场景；
-
表格布局适合对低版本浏览器兼容性要求极高的场景；
二、空白
1.元素之间空白问题
产生的原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为个空白字符
解决方案：
1.方案一：去掉换行和空格（不推荐）。
2.方案二：给父元素 设置font-size：0， 再给需要显示文字的元素，单独设置字体大小（推荐）。
2.行内块元素的空白问题
产生原因：
行内块元素与文本的基线对 齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
1.方案一：（图文都有时）给行内块元素设置vertical-align，值不为baseline即可，设置为middel、bottom、top均可。
2.方案二：若父元素中只有一张图片，设置图片为display：block。（从行内块级元素改成块元素---独占一行，不存在与谁对齐）
3.方案三：（图文都有时）给父元素设置font-size：0。如果该行内块内部还有文本，则需单独设置font-size。
