用CSS样式让div内元素垂直居中
更新时间:2023-08-08 06:02:01 阅读量: 实用文档 文档下载
- css样式div居中推荐度:
- 相关推荐
用CSS样式让div内元素垂直居中
<style>
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
</style>
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">5535435
</div>
</div>
</div>
标准浏览器如Mozilla, Opera, Safari等,可将:
父级元素显示方式设定为:TABLE(display: table;) ,
内部子元素定为table-cell (display: table-cell),
通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。
正在阅读:
用CSS样式让div内元素垂直居中08-08
如何提高中职《电工电子技术》课堂教学效果-精选文档03-07
专升本临床医学《组织学与胚胎学》试题A03-17
“四少四多”的青年干部05-02
传染病学复习要点02-03
天堂里的日落--柬埔寨vs越南03-05
湖南省桑植一中、皇仓中学2014届高三10月第二次联考数学(文)试题 Word版含答案05-15
电能表应用技术的发展与电网经济技术管理07-29
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 居中
- 垂直
- 样式
- 元素
- CSS
- div
- 新概念中的一般现在时和现在进行时练习题(1)
- 家庭装修应该考虑哪些细节问题
- SIMATIC.S7.S7-1200.可编程控制器系统手册
- 2015春季海宁市教师资格认定公告
- 人教版小学四年级语文下册期末测试卷答案
- 【03】坚果云高级使用技巧
- 魔卡幻想洗练规则介绍说明
- 断路器试验介绍
- 担保公司风险控制(2011.8.22)
- 2020年柴油车国六排放标准将实施
- 马达加斯加的企鹅
- 《能者与多劳》议论文阅读试卷讲评
- 小学教师年度考核工作总结
- 2016年西北民族大学新闻传播学院826传播学理论之《中国新闻传播史》考研内部冲刺密押卷1
- 等差数列数列练习题(一)教师版1
- 健康体检专家共识ppt课件
- 第五章基因突变及其他变异知识点
- 2012黔南民族师范学院新生入学须1
- Mathematics 1993 Paper 2
- 大学毕业唯美的句子