CSS 对齐方式
03-css2026/11/14
水平对齐
1. 文本水平对齐
.text-left {
text-align: left; /* 左对齐（默认）*/
}
.text-center {
text-align: center; /* 居中对齐 */
}
.text-right {
text-align: right; /* 右对齐 */
}
.text-justify {
text-align: justify; /* 两端对齐 */
}
2. 块级元素水平居中
/* 方法1：margin auto（最常用）*/
.center-block {
width: 300px;
margin-left: auto;
margin-right: auto;
}
/* 方法2：绝对定位 + transform */
.center-absolute {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 方法3：Flexbox */
.flex-container {
display: flex;
justify-content: center;
}
/* 方法4：Grid */
.grid-container {
display: grid;
place-items: center;
}
垂直对齐
1. 行内元素垂直对齐
.baseline {
vertical-align: baseline; /* 默认，与父元素基线对齐 */
}
.middle {
vertical-align: middle; /* 与父元素中线对齐 */
}
.top {
vertical-align: top; /* 与父元素顶部对齐 */
}
.bottom {
vertical-align: bottom; /* 与父元素底部对齐 */
}
2. 块级元素垂直居中
/* 方法1：绝对定位 + transform */
.center-vertical {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方法2：Flexbox（推荐）*/
.flex-container {
display: flex;
align-items: center;
height: 300px; /* 需要明确高度 */
}
/* 方法3：Grid */
.grid-container {
display: grid;
place-items: center;
height: 300px;
}
/* 方法4：表格布局 */
.table-container {
display: table;
height: 300px;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
Flexbox 对齐方式
Flexbox 提供了最强大的对齐控制：
1. 主轴对齐（水平方向默认）
.flex-container {
display: flex;
justify-content: flex-start; /* 左对齐（默认）*/
justify-content: center; /* 居中对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: space-between; /* 两端对齐，项目间间隔相等 */
justify-content: space-around; /* 每个项目两侧间隔相等 */
justify-content: space-evenly; /* 项目间间隔完全相等 */
}
2. 交叉轴对齐（垂直方向默认）
.flex-container {
display: flex;
align-items: stretch; /* 拉伸填满容器（默认）*/
align-items: flex-start; /* 顶部对齐 */
align-items: center; /* 居中对齐 */
align-items: flex-end; /* 底部对齐 */
align-items: baseline; /* 基线对齐 */
}
3. 多行 Flex 容器对齐
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: stretch; /* 拉伸填满（默认）*/
align-content: flex-start; /* 多行顶部对齐 */
align-content: center; /* 多行居中对齐 */
align-content: flex-end; /* 多行底部对齐 */
align-content: space-between; /* 多行两端对齐 */
align-content: space-around; /* 多行周围对齐 */
}