将table属性更改为table-cell时为什么div对齐？

Question

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/

为什么以及如何解决？

Answer 1

 .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/

Answer 2

另一种选择是使.content显示：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 vertical-align - 您将获得居中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;
}

Answer 3

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

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;
}

如果我的答案不正确并且您需要表格，请解释原因：）

Answer 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;
}