css - 应用对齐文本 :center along with linear dimension

Question

我有以下 div block :

<div id="parent" class="parent">
    <form id="child" class="child"> <input  type="text" /> </form>
</div>

和css

.parent{
    margin:auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 350px;
    height: 450px;
    background-color: #f7f7f7;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.child{
    width:200px;
    height:180px;
    background: grey;
}

JSFIDDLE .请解释为什么当我们应用到内部表单 width 和 height 属性时，我们失去了表单在 div block 中的居中，但是表单内容相对于表单的居中是安全的.即使我们对其应用线性维度，input 元素的居中也是安全的。实际上:JSFIDDLE .我很困惑。为什么这个元素的行为在我们的例子中不同？

如果可能，请给我一个 css 规范的引用。

Answer 1

.parent{


    position: absolute;
    text-align: center;
    width: 350px;
    height: 450px;
    background-color: #f7f7f7;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.child{
    margin:auto;
    width:200px;
    height:180px;
    background: grey;
}

---

文本对齐

text-align CSS 属性描述了文本等内联内容如何在其父 block 元素中对齐。 text-align 不控制 block 元素本身的对齐方式，只控制它们的内联内容。

边距:自动

将 block 本身居中而不使其内联内容居中的标准兼容方法是将左右边距设置为自动，例如: margin :自动；或 margin :0 自动；或 margin-left:auto;右边距:自动；

---

了解更多信息。你可以通过下面的链接

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

http://jsfiddle.net/T9PvK/6/