微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

纯CSS实现DIV垂直居中效果(所有浏览器有效)_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:27:43
原创
1131人浏览过

最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6  7 <style type="text/css"> 8 .test{ 9     position:absolute;10     width:200px;11     height:200px;12     background:#999;13     top:50%;14     left:50%;15     margin-top:-100px;16     margin-left:-100px;17 </style>18 </head>19 20 <body>21 22 <div class="test"></div>23 </body>24 </html>
登录后复制

经测试google,IE8,IE6,火狐,360均有效(其他浏览器应该不用说了吧)

有道小P
有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

有道小P 64
查看详情 有道小P

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnose 下一篇：JS+CSS制作的DIV层最小化和随意拖拽排序功能_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Rails中基于枚举角色实现唯一用户限制的自定义验证策略 本文探讨了在Rails应用中，如何利用自定义验证方法实现对特定枚举角色（如“校长”）的唯一性限制，以确保系统中只有一个用户拥有该角色。通过详细的代码示例和解释，文章展示了如何规避传统uniqueness验证的局限性，并提供了在多租户场景下的扩展思路及注意事项，帮助开发者构建更健壮的角色管理系统。
2025-11-17 10:59:44
471
jQuery滚动事件中元素显示/隐藏的精确控制：避免条件判断重叠 本文深入探讨了在jQuery滚动事件中，如何精确控制页面元素的显示与隐藏状态，尤其针对多段滚动区域的场景。文章指出，当使用简单的if-elseif结构处理重叠的滚动距离条件时，容易导致逻辑错误。核心解决方案是采用逻辑与（&&）运算符明确定义不重叠的滚动区间，从而确保元素状态的准确切换。教程提供了详细的代码示例和最佳实践，帮助开发者构建稳定高效的滚动交互效果。
2025-11-17 10:59:24
159
CSS纯加载旋转动画：解决伪元素延迟与同步启动问题 本文深入探讨了CSS纯加载旋转动画中，伪元素::before因animation-delay设置，在鼠标悬停时未能立即呈现错位动画效果的问题。我们将分析animation-delay与animation-play-state的交互机制，并提供解决方案，通过移除不必要的延迟确保动画在悬停时即刻以不同步调启动，同时介绍Chrome开发者工具的动画调试功能。
2025-11-17 10:55:01
750
React中判断文本输入框是否为空或仅包含空格的教程 本教程旨在指导开发者如何在React应用中，高效且符合React范式地处理文本输入框（inputtype="text"）的值。文章将重点介绍如何实时检测输入内容是否为空或仅包含空格，并根据检测结果动态显示默认文本或实际输入值，同时强调避免直接DOM操作，转而采用React的状态管理与条件渲染机制。
2025-11-17 10:54:28
965
JavaScript动态生成随机文本并插入图片教程 本教程详细介绍了如何使用JavaScript动态生成数组中的随机文本，并将其与图片一并插入到HTML元素中。文章通过对比innerText和innerHTML的用法，并结合模板字符串，提供了清晰的代码示例和实现步骤，帮助开发者高效地在网页中创建交互式内容。
2025-11-17 10:53:02
843
解决 Blazor select 控件选中项显示空白的指南 本文详细介绍了在Blazor应用中，当用户从select控件中选择一个选项后，控件显示空白的常见问题。通过深入分析错误的selected属性使用方式，并提供正确的条件渲染方法，即selected=@"selectedGrade==item.Id"，来确保select控件能准确地显示当前选中的值。本教程旨在帮助开发者正确实现Blazorselect控件的数据绑定和UI状态同步。
2025-11-17 10:50:02
974
JavaScript日程调度器：实现数据本地存储与页面持久化 本教程详细讲解如何利用JavaScript和WebStorageAPI（localStorage）为日程调度器实现事件数据的本地存储与页面重载后的持久化。通过优化数据结构、实现加载与保存逻辑，并结合时间块的动态样式更新，确保用户输入的信息能够可靠地保存并在下次访问时自动恢复，提升用户体验。
2025-11-17 10:49:01
234
JavaScript客户端表单验证：优化提交行为与错误管理 本文深入探讨了JavaScript客户端表单验证中常见的e.preventDefault()滥用问题，该问题可能导致表单在首次验证失败后无法再次提交。教程将提供一个结构化的解决方案，通过整合验证逻辑、动态管理错误信息，并确保preventDefault仅在确实存在验证错误时触发，从而实现流畅的用户体验和可靠的表单提交机制。
2025-11-17 10:41:15
333
跨页面精确滚动至指定Y轴位置：解决固定头部遮挡的实践指南 本教程旨在解决在存在固定头部导航栏时，从一个页面导航到另一个页面的特定锚点，并精确调整滚动位置的问题。文章将深入探讨浏览器默认锚点行为的局限性，提供一种利用JavaScript和延迟执行机制的优化方案，确保目标内容在固定头部下方完美呈现，并提供详细代码示例和注意事项。
2025-11-17 10:23:02
126
在AMP页面中实现CSS背景渐变动画 本文详细阐述了在AMP（AcceleratedMobilePages）页面中实现CSS背景渐变动画的方法。针对传统HTML中直接对body标签应用动画在AMP中失效的问题，我们提出并演示了通过引入一个全屏包裹div元素，并将动画样式应用于该div的解决方案。本教程提供了完整的代码示例和注意事项，帮助开发者在AMP环境中成功创建动态背景效果。
2025-11-17 09:57:17
682
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部