如何使div的内容居中[重复]答案

【问题标题】：How to center the contents of a div [duplicate]如何使div的内容居中[重复]
【发布时间】：2012-12-06 19:48:23
【问题描述】：

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

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

谢谢

【问题讨论】：

第1步：停止使用layout tables。
v4m.mobi/php/i/images/grey_background.jpg'); margin: 0 auto">
@Quentin - 谢谢你的提示
@Quentin，大多数电子邮件客户端不理解div、padding 等。在某些情况下，使用表格布局的电子邮件模板有帮助。我们如何在电子邮件模板设计中排除表格？
@DextrousDave 我对您的代码进行了一些更改，所以您期待吗？ jsfiddle.net/Ewfkk/15/#update

标签： html css

【解决方案1】：

试试这个，我做这个代码-Demo here，非常简单的代码（我只为IE旧版本使用了hack代码和额外的span标签） 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;}

【讨论】：

不错@ShibinRagh。 +1 来自我。但请编辑您的答案并将您的代码与演示链接一起发布。
谢谢，但是如果您测试代码，父元素（div）在浏览器窗口的左上角对齐。我希望它位于任何浏览器屏幕的中间
嗨。是的，你绝对是在正确的方向，但我不想要红色边框之外的任何空白。我基本上想要一个覆盖整个浏览器窗口的背景图像，我的元素在屏幕的中心，垂直和水平。我试图在我的设计中使用你最后的代码，但我仍然遇到问题
谢谢。我终于让你的代码工作了。谢谢你，你让我朝着正确的方向前进。我仍然只需要弄清楚为什么 IE9 不想识别我的边框半径、-webkit-border-radius 和 -moz-border-radius，而 Chrome 和 firefox 可以。
代码应该发布在答案中，而不是代码链接

【解决方案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>

【讨论】：

谢谢，但您的代码不起作用。我也不想为外部 div 使用固定大小。我希望内部 div 具有特定大小，并且相对于任何屏幕上的浏览器窗口居中
玩一下。这应该让你开始使用这种方法，不是吗？
是的，谢谢。会尝试看看我是否可以让它工作

【解决方案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/

【讨论】：

我其实最喜欢这个，但是，我不希望红色背景是固定的宽度和高度。我希望背景覆盖任何浏览器屏幕，所以基本上宽度：100% 和高度：100%；但是当我将其设置为 100% 时，它会占用表格的大小（即红色背景）

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

我没有在 IE 中测试过（适用于 FF 和 Safari），但如果你使用 jQuery，你可以使用它在页面中使用类 page 将 div 居中：

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

【讨论】：