如何集中一个div的内容

我有一个非常简单的问题，但我似乎无法解决它。 我有一个div里面的表格，这是主要元素。 现在我有一个宽度和高度设置为iPhone屏幕大小的表内的TD标记。 现在我基本上想要把它的td单元格放在div标签中间，这样'screen'就会在任何浏览器窗口中居中。 我怎么做？

用表replace该div解决了我的问题，但我想用div来代替。

谢谢

Answer 1

试试这一个，我做这个代码 – 这里演示 ，非常简单和简单的代码（我已经使用黑客代码和额外的跨标签只有IE旧版本） http://jsfiddle.net/ERuX4/1/

 <div class="demo wraptocenter"> <span></span> <img src="http://www.spitzer.caltech.eduhttp://img.dovov.comtwitter.png?1295473781" alt="" /> </div> 

CSS

 .wraptocenter * { vertical-align: middle; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; } /*End wraptocenter - image Vcenter patch styles*/ .demo { width:100px; height:100px; border:1px solid red; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px;} 

Answer 2

 <style type="text/css"> .outer { width:800px; height:640px; } .inner { position:relative; top:50%; left:50%; width: 320px; margin-left: -160px; /* half the width */ height: 240px; margin-top: -120px; /* half the height */ </style> <div class="outer"> <div class="inner">I'm centered!</div> </div> 

Answer 3

HTML

  <div class="img_thumb"> <table> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> </table> </div> 

CSS

 .img_thumb { background: none repeat scroll 0 0 red; display: table-cell; height: 200px; vertical-align: middle; width: 200px; } table { border: 1px solid; width: 100px; margin:auto; } 

或看演示： – http://jsfiddle.net/QHEnL/16/

Answer 4

尝试这个：

 div#centerlayout { position:absolute; left:50%; top:50%; height:XXXpx; width:XXXpx; margin-top:-XXXpx; margin-left:-XXXpx; } 

Answer 5

我还没有在IE浏览器中testing（在FF和Safari中工作），但是如果你使用的是jQuery，你可以使用这个在页面中的类page中心div：

 var pageMargin = ($(document).width() - $("div.page").width()) / 2; $("div.page").css("margin-left", pageMargin).css("margin-right", pageMargin);