为什么将显示属性更改为表格单元格时 div 向左对齐？答案

【问题标题】：Why div align to left when change display property as table-cell?为什么将显示属性更改为表格单元格时 div 向左对齐？
【发布时间】：2014-08-10 14:44:31
【问题描述】：

HTML

<div class="table">
    <div class="table-cell">
        <div class="content">
            <div class="article">
                <h2>Title</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </div>
</div>

CSS

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.table {
    width: 100%;
    height:100%;
    display:table;
}

.table-cell {
    display: table-cell;
    background-color:#ccc;
    vertical-align:middle;
    text-align:center;
}

.content {    
    background-color:#f00;
    width: 500px;
    height: 300px;
    margin:0 auto;
    text-align: left;
    color: #fff;
    display:table-cell;
    vertical-align: middle;
}

我想将 .content div 在页面中水平和垂直居中对齐。另外我想将 .article div 对齐为 .content div 中的垂直中心。但是当我对 .content div 使用 table-cell 属性时，它会向左对齐。我想要它；

但是看起来是这样的；

http://jsfiddle.net/snu306fh/2/

为什么以及如何解决？

【问题讨论】：

是浏览器特有的问题
我不认为，我尝试了两种不同的浏览器（chrom、firefox）
查看我的第二个答案的更新..

标签： html css alignment vertical-alignment tablecell

【解决方案1】：

另一种选择是将 .content 设置为 display: table 并使用 .article 作为包装器（并向其中添加 display: table-cell ）

http://jsfiddle.net/snu306fh/6/

.content {    
   background-color:#f00;
   width: 500px;
   height: 300px;
   margin:0 auto;
   text-align: left;
   color: #fff;
   display:table;
   vertical-align: middle;
}

.article {
   padding: 20px;
   display: table-cell;
}

现在希望大家开心吗？

UPD：Mb 这就是你真正要找的东西

http://jsfiddle.net/snu306fh/11/

如果您添加到 .article 垂直对齐 - 您将获得居中 div 的内容 - 也将居中

.content {    
    background-color:#f00;
    width: 500px;
    height: 300px;
    margin:0 auto;
    text-align: left;
    color: #fff;
    display:table;
    vertical-align: middle;
}

.article {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
}

【讨论】：

你应该用这个答案编辑你的其他问题
@Dejan.S 我不这么认为。另一个答案也是有效的（从我的角度来看）
您应该更新您的问题，以此作为对其他问题的补充。最终将被删除。顺便说一句，其他不是 OP 想要的。
@Dejan.S 刚刚删除了其他有“阴暗面”的答案，希望“力量”再次平衡。

【解决方案2】：

如果您需要在页面上居中块，您可以这样做：

http://jsfiddle.net/qqrh68ya/

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color:#ccc;
}
.inner {
  background-color:#f00;
  width: 500px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: left;
  color: #fff;
}

如果我的回答不正确并且您需要表格，请解释原因:)

【讨论】：

【解决方案3】：

 .content
        {
            background-color: #f00;
            width: 500px;
            height: 300px;
            margin: 0 auto;
            text-align: left;
            color: #fff;
            display: table; 
            vertical-align:middle;

        }

在显示属性中使用表格

http://jsfiddle.net/snu306fh/7/

【讨论】：

【解决方案4】：

.div-father
{
background-color: black;
width: 400px;
display: table-cell;
vertical-align: middle;
text-align: -webkit-center;
height: 400px;
}
.div-chield
{
background-color:red;
width:200px;
height:200px;
text-align: justify;
}

【讨论】：