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增加一些余量，我们就会失去垂直居中形式。 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

删除：位置：绝对;

这是因为位置：绝对;力量显示：阻止;那不是你想要的。你希望它保持显示：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;
}

居中div块的居中内容

4 个答案: