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

css水平居中，竖直居中技巧_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:46:58
原创
1410人浏览过

要点1：容器设置【position: absolute;】

要点2：容器设置【top: 50%;left: 50%;】

要点3：要知道容器实际的width和heigh（可以是预设的，也可以是运行时动态获取到的）

要点4：水平居中：margin-left = -1*（width/2），例如width是280px，则设置【margin-left:140px;】

要点5：竖直居中：margin-top = -1*（height/2），例如height是110px，则设置【margin-top:55px;】

立即学习“前端免费学习笔记（深入）”；

 

例子如下：

html

居然设计家
居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

居然设计家64
查看详情 居然设计家 

<html><head></head><body><div id="alert">    <div class="alert-header" style="display: none;">信息提示</div>    <div class="alert-message">GOOD</div>    <div class="alert-footer">        <div class="btn-close">确定</div>    </div></div></body></html>
登录后复制

css

    #alert {        position: absolute;        width: 280px;        top: 50%;        left: 50%;        margin-top: -55px;        margin-left: -140px;        border-radius: 5px;        background: #fff;        z-index: 1000000;        padding: 20px;    }
登录后复制

 运行效果

运行时实际尺寸

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：iReport-关于部署在weblogic中的项目用IE访问页面加载慢但是用火狐或者谷歌浏览器访问很快的问题_html/css_WEB-ITnose 下一篇：HTML5属性_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML5怎么实现文件上传_HTML5文件上传功能实现 HTML5通过FileAPI和FormData实现文件上传，支持多文件选择、图片预览、异步上传及进度显示，需前后端配合并做好安全校验。
2025-10-31 09:39:02
252
HTML页面内锚点链接_HTML命名锚点创建与页面内跳转实现 页面内锚点链接通过id属性实现，点击含#id的链接可跳转至同页指定位置。例如用定义锚点，再以创建链接，配合唯一且语义化的id名，并推荐启用scroll-behavior:smooth提升体验，适用于目录导航与章节跳转，提升长页面浏览效率。
2025-10-31 09:36:02
571
html源码怎么保存为本地代码文件_html源码保存为本地代码文件的教程 使用浏览器“另存为”功能可保存网页及资源；2.手动复制源代码适用于仅需HTML结构；3.通过开发者工具提取可获取动态生成的完整DOM，均需保存为.html文件。
2025-10-31 09:29:02
405
HTML数据如何实现数据智能 HTML数据智能分析的技术架构 实现HTML数据智能分析需构建包含采集、解析、存储、分析与可视化的闭环系统，首先通过爬虫技术获取网页数据并进行清洗标准化，接着利用DOM树分析与NLP技术提取结构化信息，随后将数据存入合适数据库或数据仓库并建立元数据管理机制，进而应用AI模型开展分类、情感分析、趋势预测与知识图谱构建等智能分析，最终实现数据驱动决策，其中关键在于提升数据质量与自动化水平，并持续维护解析规则以应对网站变化。
2025-10-31 09:13:06
275
使用HTML、CSS和JavaScript实现下拉菜单条件链接跳转 本文详细介绍了如何利用HTML构建下拉菜单、CSS进行样式美化以及JavaScript实现交互逻辑，创建一个基于用户选择的条件链接跳转功能。用户从下拉菜单中选择一个选项后，点击提交按钮即可被重定向到预设的URL，从而实现动态的页面导航。
2025-10-31 09:07:12
687
如何编辑网页HTML中的图片_如何编辑网页HTML中图片的显示与链接 可通过编辑HTML代码调整图片显示效果和链接行为。一、修改width和height属性可改变图片显示尺寸；二、用标签包裹图片可添加超链接；三、更改src属性可替换图片源；四、设置alt属性提供替代文本，利于无障碍访问和SEO；五、通过style属性调整CSS样式实现对齐与边距控制。
2025-10-31 09:07:02
356
html函数如何构建可编辑的内容 html函数contenteditable属性用法 contenteditable是HTML的布尔属性，用于设置元素可编辑，通过添加contenteditable="true"使div、p、h3等元素可编辑，结合JavaScript的innerHTML获取内容，需注意HTML结构保留、浏览器兼容性和XSS风险，适用于富文本场景。
2025-10-31 08:14:02
482
html如何标记gif_HTML GIF图片标记与alt属性设置方法 使用img标签插入GIF图片并设置alt属性可提升无障碍访问和SEO，如：。
2025-10-31 08:11:02
649
JavaScript中点击子元素按钮获取父级div索引的策略 本教程旨在解决在JavaScript中，当嵌套的div结构中子元素按钮被点击时，如何高效准确地获取其父级.row元素的索引问题。文章将详细介绍两种主要策略：通过事件委托在父元素上监听点击事件，以及直接为特定子按钮添加事件监听器，并提供详细的代码示例、应用场景分析及优化建议，帮助开发者根据具体需求选择最佳实现方案。
2025-10-31 08:10:01
909
HTML5网页如何制作日历组件 HTML5网页日期选择器的开发 使用HTML5原生input类型可快速实现日期选择器，如，兼容现代浏览器；若需自定义样式与功能，则通过JavaScript生成日历表格、CSS布局美化，并添加月切换、日期选择、高亮显示及范围限制等功能，结合响应式设计与无障碍支持，提升可用性。
2025-10-31 07:53:34
428
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部