CSS 垂直对齐方式有哪些，附示例代码

CSS中有很多垂直对齐的方式，以下是其中一些常见的方法：比如：Flex布局、Line-height法、Padding法、Position属性、Table布局、Margin负值等等，下边源码码网一一举例说明。

1、Flex布局：使用flex布局可以非常方便地实现垂直对齐。例如，在容器上添加属性align-items: center可以将子元素垂直居中。

.container {
  display: flex;
  align-items: center;
}

2、Line-height法：如果文本的行数只有一行，可以通过设置line-height属性与容器高度相同来实现垂直居中。

.container {
  height: 100px;
  line-height: 100px;
}

3、Padding法：通过设置padding属性来实现垂直居中。

.container {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 10px;
}

4、Position属性：通过设置元素的position属性为absolute或fixed，然后使用transform属性将其向上或向下移动一定距离来实现垂直居中。

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5、Table布局：通过将容器设置为display: table，将子元素设置为display: table-cell并设置vertical-align: middle来实现垂直居中。

.container {
  display: table;
}

.element {
  display: table-cell;
  vertical-align: middle;
}

6、Margin负值：通过将子元素设置为绝对定位，设置top属性为50%，并将margin-top设置为负值，使其向上移动50%的距离来实现垂直居中心。

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上是一些常见的垂直对齐方式，具体使用哪种方式要根据你的需求和实际情况来决定。关注源码码网，了解更多编程知识！

特别声明：
1、如无特殊说明，内容均为本站原创发布，转载请注明出处；
2、部分转载文章已注明出处，转载目的为学习和交流，如有侵犯，请联系客服删除；
3、编辑非《源码码网》的文章均由用户编辑发布，不代表本站立场，如涉及侵犯，请联系删除；

全部评论(0)

推荐阅读

常用测试压力工具使用介绍
ab 是 ApacheBench 工具的缩写，它是一个HTTP压力测试工具。让我详细说明如何测试：1. 安装ApacheBenchWindows系统：方法一：安装XAMPP或WAMP（自带ab）下载地址：https://www.apachefriends.org/zh_cn/index.html安装后，ab工具在：C:xamppapacheinab.exe方法二：使
开发工具
来源：源码码网
编辑：源码码网
时间：2026-01-13 20:27
阅读：56

工程项目一体化自动管理软件解决方案
1.项目概述1.1项目背景在工程建设行业数字化转型浪潮下，传统项目管理面临信息孤岛、协同困难、进度不可控、成本超支等痛点。本方案旨在构建一个覆盖工程项目全生命周期、全参与方、全业务流程的一体化智能管理平台。1.2解决方案愿景打造数据驱动、智能协同、风险预警、自动执行的工程大脑，实现：管理流程自动化率≥80%项目协同效率提升40%成本偏差率降低至±3%以内安全事故发生率降低60%1.3目标用户矩阵┌───────────────┬
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 11:26
阅读：169

车辆管理系统需求文档与技术架构PC端+小程序
第一部分：需求文档1.项目概述1.1项目背景为企事业单位、车队运营商、租赁公司等提供一套完整的车辆全生命周期管理解决方案，实现车辆管理数字化、智能化。1.2项目目标建立车辆从购置到报废的全流程管理体系实现用车申请、调度、监控、结算的闭环管理通过数据分析优化车辆使用效率降低车辆运维成本20%以上1.3用户角色矩阵┌──────────────┬─────────────────────────────┬──────────────
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 11:11
阅读：157

智慧农业/渔业物联网系统需求文档
智慧农业/渔业物联网系统需求文档文档版本： V1.0项目目标：构建一个集环境智能监测、设备自动化控制、生长模型分析、溯源管理与远程指挥于一体的综合物联网管理平台，实现降本增效、提质增产、风险预警与品牌增值。1.系统总体概述1.1核心价值：数据驱动决策，解放人力，实现农业/渔业生产的精准化、自动化与智能化。1.2用户角色：生产员/养殖员：现场巡视、接收告警、执行设备手动控制、查看实时环境
行业资讯
来源：源码码网
编辑：源码码网
时间：2026-01-09 11:04
阅读：68

程序员AI编程工具推荐
AI编程工具是当前开发者的“副驾驶”，能够极大提升开发效率。以下我将从通用型、代码专用型、垂直领域型以及开源/自部署型几个维度为您分类推荐，并附上它们的核心特点和适用场景，帮助您选择。一、通用型AI对话助手（编程是核心能力之一）这类工具本质是“更懂代码的ChatGPT”，适合处理广泛的编程问题、解释代码、生成文档等。ChatGPT(GPT-4/4o)简介：行业标杆，尤其在GPT-4版本下，代码理解和生成能力极强。优点：上下文能力强，
源码教程
来源：源码码网
编辑：源码码网
时间：2026-01-09 10:56
阅读：96