Абсолютный центр жидкости div

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>