登录  /  注册

怎么让div垂直居中?_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:21:31
原创
1742人浏览过

有两个div:


  

  



div1的大小是动态的,我想让div2在div1中垂直居中,
用css怎么写?

回复讨论(解决方案)

line-height和 height的值设置成相同的即可

line-height和 height的值设置成相同的即可
设置div1的line-height?

#div1{ display:table-cell;vertical-align:middle;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

 #div1 {            border-top:1px solid;            border-bottom:1px solid;            color:transparent;            /**/            background-color:#eee;                                       }        #div2 {            background-color:#ccc;            color:#000;            margin-top:10px;            margin-bottom:10px;        }
登录后复制


模拟单元格也是好办法。

动态的,必须用js,单纯的css实现不了

#div1{ display:table-cell;vertical-align:middle;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制


这个可行,但是用了display:table-cell之后
margin不起作用了 靠左
请教怎么解决


#div1{ display:table-cell;vertical-align:middle;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制


这个可行,但是用了display:table-cell之后
margin不起作用了 靠左
请教怎么解决

试过用固定定位 absolute
可是display:table-cell效果就没有了

还是用js吧


#div1{ display:table-cell;vertical-align:middle;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制


这个可行,但是用了display:table-cell之后
margin不起作用了 靠左
请教怎么解决
外层在套一个DIV来控制间隔
<style>      #div1{ display:table-cell;vertical-align:middle;}      .inner{ margin:10px;}</style><div class="inner"><div id="div1">  <div id="div2">  </div></div></div>
登录后复制
登录后复制



#div1{ display:table-cell;vertical-align:middle;}
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制


这个可行,但是用了display:table-cell之后
margin不起作用了 靠左
请教怎么解决
外层在套一个DIV来控制间隔
<style>      #div1{ display:table-cell;vertical-align:middle;}      .inner{ margin:10px;}</style><div class="inner"><div id="div1">  <div id="div2">  </div></div></div>
登录后复制
登录后复制



效果出来了
另外还想探讨下
为了做出这种效果用了多个div
是否会繁琐

如果单纯只是这样的话,直接对div加一个padding不就可以了?

设置div2的css
 #div2 {
       width:***px;
       margin:0 auto;
}
就可以了

学习下.学这个头大

额,我是新手,没太看懂,为什么不用

呢?

如果单纯只是这样的话,直接对div加一个padding不就可以了?  

 html5中已经去掉了

单纯用CSS控制垂直居中挺难的,我试过写,但是效果不好,要做到多浏览器兼容的垂直居中效果,还是建议用JS写

CSS未知高度div 垂直居中的问题
这个问题我碰过。可以用上面的方法解决。

额,我是新手,没太看懂,为什么不用

呢?

貌似只有IE内核浏览器支持,火狐就不支持这种写法。


额,我是新手,没太看懂,为什么不用

呢?

貌似只有IE内核浏览器支持,火狐就不支持这种写法。

其实我一直用chrome做测试,center是ok的,不过刚刚查了html5手册,果然是要删,只好另寻办法了。。。

div1中加入 vertical-align:middle

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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