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

HTML

我想将.content div在页面中水平和垂直居中对齐。我还想将.article div与.content div垂直居中对齐，但当我使用.content div的表单元格属性时，它会向左对齐。我想把它作为一个整体

但它看起来像这样

为什么以及如何修复

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

        }

在显示属性中使用表

---

另一个选项是将.content作为display:table和use.article作为包装，并将display:table单元格添加到其中

现在我希望大家快乐

这就是你真正想要的

如果您添加到.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;
}

---

如果需要在页面上居中放置块，可以执行以下操作：

---

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

是浏览器特有的问题吗？我不认为，我已经尝试了两种不同的浏览器chrom，Firefox。请查看我第二个答案的更新。您应该用这个来编辑您的其他问题answer@Dejan.S我不这么认为。另一个答案也是有效的，从我的观点来看，你应该更新你的问题，以此作为对另一个的赞美。它最终将被移除。顺便说一句，另一个不是OP想要的。@Dejan.S刚刚删除了另一个有黑暗面的答案，希望原力再次平衡。

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

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

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

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

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