絕對中心流體格

Question

美好的一天。

我知道，如果你想絕對中心一個div，你這樣做：

<div id="parent"> 
    <div id="child">blahblah</div> 
</div> 

CSS：

#parent{ 
    width: 500px; 
    height: 500px; 
    position: absolute; /*(or relative)*/ 
    top: 50%; 
    left: 50%; 
    margin-top: -250px; 
    margin-left: -250px; 
    text-align: center; 
} 

如果什麼父DIV是流體DIV？你怎麼絕對中心它意味着：

#parent{ 
    max-width: 500px; 
    max-height: 500px; 
    top: 50%; ->is this right? 
    left: 50%; -> is this right? 
    margin-top: ???; 
    margin-left: ???; 
    text-align: center; 
} 

Answer 1

由於width和height是流動的，你需要去JavaScript或jQuery的。只需在head標記中添加下面的代碼即可。 （下面的例子的是在JavaScript）

<script> 
    window.onresize = function(){ 
     //To work even on resize 
     getToMiddle(); 
    } 
    window.onload = function(){ 
     getToMiddle(); 
    } 

    function getToMiddle(){ 
     var box = document.getElementById('parent'); 
     var height = box.offsetHeight; 
     var width = box.offsetWidth; 
     box.style.top = -(height/2); 
     box.style.left = -(width/2); 
    } 
</script> 

---

和你的CSS是這樣的：

#parent{ 
    max-width: 500px; 
    max-height: 500px; 
    background-color:green; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    /* width: 10%; 
    height: 10%; */ 
} 

要進行測試，給width: 10%; and height: 10%

Working Fiddle

Answer 2

這可以用CSS來完成。

#parent { 
    position: absolute; 
    max-width: 500px; 
    max-height: 500px; 
    width: 100%; 
    height: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

觀看演示https://jsfiddle.net/matharden/8kmvt8qd/

Answer 3

我會簡單地使用flex實現這個...

#parent { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div id="parent"> 
 
    <div id="child">blahblah</div> 
 
</div>