怎么让div垂直居中？_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 12:21:31

原创

2250人浏览过

有两个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 垂直居中的问题
这个问题我碰过。可以用上面的方法解决。

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