前端小白--CSS实现水平垂直居中

已于 2022-06-30 11:41:36 修改
阅读量404 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端就那么回事 文章标签： 前端 css垂直居中 css垂直水平居中 transform margin
于 2017-12-11 15:52:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38209578/article/details/78773514
本文介绍了CSS中五种常用的水平垂直居中方法，包括transform的变形居中、table表格居中、margin:auto实现居中、fixed定位以及margin配合position实现居中。详细阐述了每种方法的优缺点及其适用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目前通过CSS样式实现垂直居中水平居中的绝对定位居中的方法有13种，本文主要介绍几种实用的方式,其中前两种是目前应用最广泛的。

1.transform的变形居中

.father{
   
   
	 position: relative;
}
.child{
   
   
	position: absolute;
    top: 50%; 
    l
了解本专栏 订阅专栏 解锁全文
博客
认识大前端，开启无限可能
11-05 1万+
万丈高楼平地起。开课第一周，我们将以轻松幽默的方式，从实际工作中的开发痛点出发，以项目全生命周期为主线，对全栈有全局的认识。从整体项目分析开始，培养项目架构思维。一、了解大前端知识体系，有全局的认知1.1 工程师的技能树在大前端知识体系中，每个阶段的工程师，需要有不同的知识技能储备。江湖封号程序猿（媛），业内一般称呼软件开发工程师。1.1.1 初级工程师初级前端工程师的标准，就是能够完成日常的功能开发和debug，可以在已有的代码基础上做修改，优化和维护；熟练使用平时开发需要用到的工具即.
博客
你想成为什么样的人，你就要以什么样的标准来要求自己
09-03 5922
梦想还是要有的，没有梦想跟咸鱼有什么两样慎重的考虑了，最后给自己一个阶段的小目标——“前端第一人”主要职责： 1.准确理解产品需求、交互文档或原型, 进行 web 产品前端开发； 2.优化用户体验，修正项目中出现的问题； 3.与设计美工配合完成页面的静态化； 4.参与用户相关交互设计，配合后台开发人员，完成页面的交互功能，联调工作；自我要求： 1.精通 div+css......
博客
滚动条自定义解决方案：实现100%还原度
07-18 52
摘要：文章分析了原生滚动条存在的痛点，包括样式不统一、挤压布局、兼容性问题以及缺乏过渡动画等。提出组件化自定义滚动条的解决方案，通过CSS和JavaScript实现美观统一的滚动条样式，支持平滑过渡效果。代码示例展示了如何构建包含垂直/水平滚动条的容器，并设置了悬停交互效果。该方案能有效解决原生滚动条在跨浏览器和特殊场景下的显示问题，提升用户体验。
博客
还原度不达标按差异点数
04-16 107
示例：某页面存在2处颜色偏差（1×2）、1处图标变形（2×1）、1处焦点逻辑错误（2×1），总差异点=2+2+2=6点。示例：某项目总检测点200个，允许差异点10个，实际差异点15个 → 退款金额=（15-10）×500=2500元。：承诺还原度≥95%（差异点≤总检测点×5%），超出部分按差异点数退款。：将组件拆解为原子属性（如颜色、间距）单独计点，而非整体判罚；：高频使用组件（如按钮、表单）的差异点权重翻倍（如3点/处）；单个页面差异点总数 = ∑（子项差异数 × 权重）
博客
「AIGC」AI设计工具LensGO
10-24 368
LensGo 也是目前正在快速增长的 AI 视频生成平台中的一员，虽然平台官方并没有将背后所用的大模型公布出来，但是从生成效果来看，也是基于头部的几个大模型 搞出来的东西。在功能上，LensGo 支持视频内容的风格转换，文生图，文生视频，图生视频，也能微调和训练自己的模型，功能该有的都有。定位：文本到图像生成、文本到视频动画、视频转视频、视频风格迁移、风格定制、用户友好界面（限制：18种风格10秒）
博客
「AIGC」AI设计工具 v0.dev
10-24 561
20学习前端代码本身似乎并不复杂，但是有平台能够直接生成代码、预览效果，似乎更有性价比。可能对于有前端和开发经验的同学而言，直接实现某个页面效果并不算是太复杂的事情，但是对于没有代码经验的同学而言，直接使用 AI 跑出代码甚至直接落地成为可以运行的程序还是非常有意义的。
博客
「AIGC」AI设计工具Polymet
10-24 544
是一个 Y-Combinator 投资的一个 AI 平台，它和我们之前所用到的很多 AI 工具有着明显差别，它有着更强的指向性——成为 AI 产品设计师和 AI 前端。Polymet 可以根据提示词描述来生成数字界面内容，根据自然语言生成我们所熟悉的、可交互的数字界面，这也意味着在要求不高的情况下，一部分有需求的用户甚至可以借助它直接跳过设计师，拿到前端代码，让产品进入调整、测试和应用的阶段，起码在数字产品的早期阶段，快速原型的搭建和测试，几乎可以不需要进行界面设计了。
博客
「UCD」ComfyUI设计提效工具
10-22 233
ComfyUI 支持自定义节点插件，这些插件可以大大增强 ComfyUI 的功能和使用体验。
博客
「AIGC」n8n AI Agent开源的工作流自动化工具
10-22 3190
n8n AI Agent在工作流中直接使用 JavaScript 或 Python 代码，以实现高度定制的逻辑。
博客
「UCD」用户体验设计专家
08-23 1142
评估产品的用户体验（User Experience, UX）是一项多维度的工作，要考虑用户在使用产品时的各个方面，包括易用性、满意度、效能和可访问性等。虽然没有单一的评估方法可以全面覆盖所有维度，但通过结合定量和定性的方法，可以获得更全面的评估结果。通过创建详细的用户画像，设计师和开发团队可以更好地理解目标用户的需求、行为和痛点，从而更有针对性地设计产品功能与界面。结合出问题的位置进行可用性测试，以找到并修复痛点。综合这些评估方法，你可以得到比较全方位的数据支持和定性的洞察，从而不断优化你产品的用户体验。
博客
「Vue组件化」封装i18n国际化
07-18 734
在Vue应用中实现国际化（i18n），通常需要使用一些专门的库，比如vue-i18n。本文主要介绍自定义封装i18n，支持Vue、uniapp等版本。
博客
「Vue组件化」封装SVG图标
07-18 887
首先创建一个用于加载SVG文件的Vue组件。将SVG文件放在项目的某个目录下，例如components/svgIcon/。创建一个函数来动态导入SVG文件，并注册到Vue组件中。在项目中通过组件标签使用SVG图标。
博客
「Conda」在Linux系统中安装Conda环境管理器
07-15 617
在Linux系统中安装Conda环境管理器是一个相对简单的过程。
博客
「Python」基于Gunicorn、Flask和Docker的高并发部署
07-15 1105
参数确保使用最新的Dockerfile重新构建镜像。这个命令会构建Docker镜像并启动服务。，来模拟高并发请求并测试应用的性能。（Apache Bench）或。使用压力测试工具，如。
博客
「UCD」用户体验设计
07-11 475
用户体验设计是产品设计的心脏，它跨越多个学科，包括界面设计、信息架构、人机交互等，以确保最终产品能够提供卓越的用户体验。UX设计不仅关注产品的功能性和美观性，还关注产品如何与用户进行有效沟通，以及如何在竞争激烈的市场中突显其品牌价值。
博客
「UCD」浅谈蓝湖Figma交互设计对齐
07-11 1013
在现代数字产品的设计和开发过程中，选择合适的工具对于提高团队效率和保证产品质量至关重要。本文将从开发和设计两个不同的角度，探讨蓝湖和Figma两款流行工具的优势与不足，并提出结论和建议。
博客
「AIGC」“AI+作业”，是辅助还是颠覆
07-09 365
总的来说，"AI+作业"目前更多地被视为一种辅助手段，它为教育领域带来了许多积极的变化和可能性。然而，我们也应注意到它可能带来的挑战，并采取措施确保技术的健康发展和应用，避免对教育的本质造成负面影响。例如，通过制定合理的教学策略，平衡技术使用和传统教学方法，以及确保所有学生都能公平地获得AI辅助学习的机会。"AI+作业"指的是将人工智能技术应用于作业辅导和学习过程中，这可以包括个性化学习计划、自动化作业批改、智能辅导和推荐学习资源等功能。
博客
「AIGC」使用AI集成工具提升工作效率
07-09 444
使用AI集成工具提升工作效率的一个实际例子是通过自动化数据分析和生成报告。以下是一个更丰富的示例，我们将构建一个简单的Python脚本，使用pandas进行数据分析，matplotlib进行数据可视化，以及进行简单的预测建模。这个流程可以用于快速洞察数据特征，自动化报告生成，从而节省时间并减少重复性工作。5pandasmatplotlib请注意，这个示例假设你有一个名为的CSV文件，其中包含至少一个名为Purchased的列，用于表示客户是否购买了产品。
博客
「AIGC」大语言模型系列-Transformer详解
07-08 1637
这个示例代码提供了一个Transformer模型的框架，包括多头自注意力机制、编码器和解码器层、以及最终的输出层。然而，为了保持简洁，解码器的实现和训练逻辑没有包括在内。Transformer模型相对复杂，下面我将提供一个简化版的Transformer模型的Python代码示例，使用PyTorch库实现。这个示例将包括模型的基本结构，如编码器和解码器，自注意力机制，位置编码，以及前馈网络。请注意，这个示例主要用于教学目的，可能不包括一些生产环境中所需的特性，比如层标准化、残差连接、优化器、训练循环等。
博客
「AIGC」TDSQL技术详解
07-08 1198
创建一个完整的TDSQL实例涉及到多个步骤，包括数据库的创建、配置、连接以及基本的数据库操作。请注意，以下示例代码是模拟操作，实际使用时需要根据TDSQL的具体环境和要求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值