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

CSS布局问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:06:34
原创
1136人浏览过

对于父容器的大小未知，子元素的大小未知，如何是的子元素相对于付父容器垂直居中布局？

AI建筑知识问答
AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

AI建筑知识问答 22
查看详情 AI建筑知识问答

回复讨论(解决方案)

这种情况怎么可能出现呢？父容器宽高未知，说明是有内容撑开，既然又内容撑开，何来垂直居中一说？

只能用js动态获取容器的高度了，然后子容器做个定位

父元素设置相等的padding-top和padding-bottem值

对于父容器的大小未知，子元素的大小未知，如何使子元素相对于父容器垂直居中布局？
不能修改父元素的布局，不用JS

对于父容器的大小未知，子元素的大小未知，如何使子元素相对于父容器垂直居中布局？
不能修改父元素的布局，不用JS
子容器包含在父容器里面,设置子容器的样式margin:auto;这样试试，但是如果父容器小于子容器，不知道会发生什么事情

这道题有点像是腾讯前端的在线试题，那个前端突击队。
用下面这个可以保证水平垂直居中：
       position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

这道题有点像是腾讯前端的在线试题，那个前端突击队。
用下面这个可以保证水平垂直居中：
       position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
这种方法子元素不定高宽的话不可能居中。你可以试试。


这道题有点像是腾讯前端的在线试题，那个前端突击队。
用下面这个可以保证水平垂直居中：
       position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
这种方法子元素不定高宽的话不可能居中。你可以试试。
就是那个题目 谢谢你了

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：12个学习 CSS3 网站布局设计的优秀案例_html/css_WEB-ITnose 下一篇：《编写高质量代码??Web前端开发修炼之道》读后随笔_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
如何在线编辑网页HTML_如何通过在线工具编辑网页HTML 一、使用在线HTML编辑器可直接在浏览器编写并实时预览代码，支持导出文件；二、通过浏览器开发者工具能临时修改网页结构以调试页面，但刷新后恢复；三、云端IDE如Replit适合长期协作项目，支持完整开发与部署。
2025-11-11 13:42:04
529
使用CSS max-height 实现可变高度内容的平滑展开动画 本教程详细介绍了如何解决CSS中height:auto无法直接动画的难题，通过巧妙利用max-height属性，结合transition和JavaScript类切换，实现内容在点击展开时的高度平滑过渡效果。文章将提供具体的CSS和JavaScript代码示例，并探讨关键的max-height值选择策略，以确保用户界面在内容显示时既能避免突兀的跳跃，又能消除不必要的空白间距。
2025-11-11 13:07:12
293
深入理解Bootstrap列垂直对齐：解决align-items不生效的问题 本文深入探讨了Bootstrap中列垂直对齐的常见问题，特别是在使用align-items类时内容未能按预期对齐的原因。核心在于Flexbox容器（即row元素）需要明确的高度才能使垂直对齐工具类生效。文章通过示例代码展示了如何利用vh-100和h-100等实用工具类来正确实现列内容的垂直居中、顶部或底部对齐。
2025-11-11 13:06:16
427
Laravel Blade中基于数据值条件渲染HTML元素：处理空值与Null 本教程详细讲解如何在LaravelBlade模板中根据数据字段的值是否为空或null来条件显示HTML元素，特别是P标签。通过利用Blade的@if指令结合PHP的empty()函数，开发者可以确保只有当数据存在且有意义时才渲染相应的HTML内容，从而避免页面出现不必要的空白或占位符，提升用户体验和模板整洁度。
2025-11-11 13:00:44
970
html滚动条样式怎么实现分页滚动感_html滚动条分页式滚动效果方法 使用CSS的scroll-snap属性可快速实现分页滚动，配合JavaScript能精确控制翻页行为并添加分页指示器提升交互体验。
2025-11-11 13:00:04
950
解决Flexbox中文本溢出导致元素位移问题 本文旨在深入探讨Flexbox布局中，当文本内容溢出并应用text-overflow:ellipsis时，相邻元素可能发生位移的原因。文章将详细解释Flex项目默认min-width行为如何影响布局，并提供通过设置width:0或min-width:0来有效控制溢出文本，确保元素正确对齐的专业解决方案，从而避免不必要的布局偏移。
2025-11-11 12:58:20
999
动态DOM操作与无障碍性：确保JavaScript生成内容的易访问性 动态修改DOM是现代Web开发常见实践，但需警惕其对无障碍性的潜在影响。本文探讨了JavaScript/jQuery操作DOM时如何确保内容对所有用户（包括辅助技术使用者）保持可访问性，强调了与静态HTML同等的无障碍标准，并提出了关键注意事项，如语义化、ARIA属性和焦点管理，以确保网站在任何时刻都保持高度可访问性。
2025-11-11 12:58:01
253
html如何连接按钮_HTML按钮（button）与表单/事件连接方法 按钮通过type="submit"提交表单，2.用onclick或addEventListener执行JavaScript，3.type="reset"重置表单，type="button"配合脚本避免默认行为，4.调用函数发送请求。
2025-11-11 12:55:37
799
CSS样式精确控制：为特定动态生成表格应用样式指南 本文旨在解决为动态生成的HTML表格应用CSS样式时，特定样式（如border-collapse）未能正确生效的问题。通过深入解析CSS选择器的精确性，特别是元素.类名与.类名元素之间的区别，我们将展示如何正确地为具有特定类名的表格及其内部单元格应用样式，确保所有CSS属性按预期工作。
2025-11-11 12:54:20
544
AEM HTL中动态添加HTML属性：解决rel属性不生效问题 本文深入探讨了在AdobeExperienceManager(AEM)的HTL模板中，如何正确且安全地为HTML元素动态添加属性，特别是当属性值来源于组件对话框时。针对常见的rel属性不生效问题，文章提供了使用properties对象结合context=‘attribute’HTL上下文属性的解决方案，并详细解释了其工作原理及应用场景，确保属性的正确渲染和安全性。
2025-11-11 12:54:02
836
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部