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