如何居中div的内容(How to center the contents of a div [duplicate])

如何居中div的内容(How to center the contents of a div [duplicate])

我有一个非常简单的问题，但我似乎无法解决它。 我在div中有一个表，这是主要元素。 现在我在表格中有一个td标签，其宽度和高度设置为iphone屏幕尺寸。 现在我基本上希望将该表与其div标签中的td单元居中，这样“屏幕”将在任何浏览器窗口中居中。 我怎么做？

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

谢谢

This question already has an answer here:

How to horizontally center a <div>? 101 answers

I have a very simple problem, but I can't seem to solve it. I have a table inside a div, which is the main element. Now I have a td tag inside the table with a width and hight set to that of an iphone screen size. Now I basically want to center that table with its td cell within the div tag, so that the 'screen' will be centered in any browser window. How do I do that?

Replacing that div with a table solved my problem, but I would like to use a div instead.

Thank You

最满意答案

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

<div class="demo wraptocenter"> <span></span> <img src="http://www.spitzer.caltech.edu/images/twitter.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;}

Try this one , I do this code - Demo here, Very easy and simple code ( I have used a hack code and extra span tag for only IE old version) http://jsfiddle.net/ERuX4/1/

<div class="demo wraptocenter"> <span></span> <img src="http://www.spitzer.caltech.edu/images/twitter.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;}