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

有两个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