當父div高度未定時，在另一個div中居中一個div

Question

我試圖在另一個div內水平和垂直居中放置一個div。我的問題是，在窗口調整父div變化的寬度和高度。爲此，我有問題將div集中在父div的中心。 這裏是我父div的寬度和高度定義的情況下：

<div id="parent" style=""> 
    <div id="child">Foo foo</div> 
</div> 

二氧化碳捕獲和封存：

#child { 
    display: table; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color:red; 
    width:50px; 
    height:50px 
} 
#parent{ 
    background-color:blue; 
    width:400px; 
    height:400px; 
} 

我不知道爲什麼它是如此難以實現呢？ JSFIDDLE

Answer 1

這裏是實現這一目標的一種方式:)通過設置display: flex;父DIV，併爲孩子格設置margin: auto

https://jsfiddle.net/e4xhrvcf/

.parent{ 
    width:500px; 
    height: 500px; 
    background-color:red; 
    display: flex; 
    align-items: center; 
} 

Answer 2

使用CSS-Flexboxes。
從css中刪除top，bottom，right,left。

Answer 3

如果我明白你想要什麼，我想你只需要相對位置添加到父，以獲得在孩子絕對的工作：

#parent{ 
background-color:blue; 
width:400px; 
height:400px; 
position : relative; 
} 

Answer 4

http://codepen.io/anon/pen/rrdVbO

#parent{ 
    position: relative; 
    background-color:blue; 
    width:400px; 
    height:400px; 
} 
#child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background-color:red; 
    width:50px; 
    height:50px; 
    transform: translate(-50%, -50%); 
} 

的家長需要爲子女的absolute定義一個position定義。使用頂部和左側50％將兒童的左上角居中，然後使用transform: translate(-50%, -50%)將其向上移動並將其向左移動一半，然後左右移動。

Answer 5

試試這個，

HTML

<div id="grandParent"> 
    <div id="parent"> 
    <div id="child"> 
    foo foo 
    </div> 
    </div> 
</div> 

CSS

html, body{ 
    height:100%; 
} 

#grandParent{ 
    display: table; 
    min-height:100%; 
    width:100%; 
} 

#parent{ 
background-color:red; 
display:table-cell; 
text-align: center; 
vertical-align:middle; 
} 

#child { 
background-color:blue; 
display:table; 
margin:0 auto; 
} 

小提琴

https://jsfiddle.net/guruling/7o764szj/2/