居中div块的居中内容

Question

我们可以将div块的内容居中，如下所示：

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

css样式

.parent{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width:500px;
    height:500px;
    border: 1px solid #dd0;
    background: #ffa;    
}

可以将表格居中。 JSFIDDLE 。 但是，如果我们向div.parent添加一些边距， div.parent丢失垂直居中形式。 JSFIDDLE 。 请解释一下为什么会这样？

Answer 1

如果要向单元格添加边距，请尝试以下代码：

    .parent{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width:500px;
    height:500px;
    border: 1px solid #dd0;
    background: #ffa;    
}

input[type=text] {
    margin: 20px;   
    position: absolute;
}

http://jsfiddle.net/markom/ZLLVu/3/

Answer 2

移除position: absolute; 而且效果很好！

的jsfiddle

Answer 3

移除：位置：绝对；

这是因为position：absolute; 强制显示：阻止； 那不是你想要的。 您希望它保持显示状态：table-cell;

Answer 4

如果您想使容器水平和垂直居中，请在此处查看： http : //jsfiddle.net/g4xfx/3/show/

如果调整浏览器窗口的大小， .parent也将居中。 内容（在您的情况下为form ）也在父容器内水平和垂直居中。

.parent {
    position: absolute;
    margin-top:-250px;
    margin-left:-250px;
    top:50%;
    left:50%;
    width:500px;
    height:500px;
    border: 1px solid #dd0;
    background: #ffa;
    display:table;
}
.parent form {
    width:100%;
    height:100%;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}