Wyśrodkuj div wewnątrz innego div

Question

Próbuję vertical-align: middle div wewnątrz innego div, ale z jakiegoś powodu nie działa poprawnie. Co ja robię źle?

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'block'> I'm Block </div> 
 
<div>

PS: Jest to tylko przykład, więc nie, nie wiem właściwie rzeczywista szerokość i wysokość div, gdy są dynamiczne, zgodnie z ich treścią , więc proszę, nie ma marginesu na górze: 125px, ani dopełnienia-u góry: odpowiedzi na 125px, lub odpowiedzi w ten sposób.

Answer 1

Właściwość vertical-align dotyczy tylko inline i tabeli komórek elementów (source). W swoim kodzie pracujesz z elementami blokowymi na poziomie.

Spróbuj schematu flexbox alternatywę:

#wrapper { 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex;    /* establish flex container */ 
 
    align-items: center;   /* vertically center flex items */ 
 
} 
 

 
#block { 
 
    border: 1px solid blue; 
 
    width: 500px; 
 
    height: 250px; 
 
    /* vertical-align: middle; */ 
 
}

<div id='wrapper'> 
 
    <div id='block'> I'm Block </div> 
 
<div>

Dowiedz się więcej o elastycznego dostosowania tutaj: Methods for Aligning Flex Items

wsparcie Przeglądarka:schematu flexbox jest obsługiwana przez wszystkich głównych przeglądarek except IE < 10. Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają vendor prefixes. Aby szybko dodać prefiksy, użyj Autoprefixer. Więcej szczegółów w this answer.

Answer 2

Oto jak zwykle to robię.

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
position: relative; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
position: absolute; 
 
top: 50%; 
 
transform: translateY(-50%); 
 
}

<div id="wrapper"> 
 
<div id="block"></div> 
 
</div>

Łatwy sposób, aby to dynamiczna.

Answer 3

Można to zrobić:

#block { 
border: 1px solid blue; 
margin:25% 0; 
width: 500px; 
height: 250px; 
vertical-align: middle;} 

Ale, to nie jest to, czego szukasz!

lub jak poniżej:

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
display:table-cell; 
vertical-align: middle; 
} 
#block { 
border: 1px solid blue; 
display:inline-block; 
width: 500px; 
height: 250px; 
} 

Answer 4

Można zrobić to w ten sposób:

#wrapper { 
    border: 1px solid red; 
    width: 500px; 
    height: 500px; 
} 
#block { 
    border: 1px solid blue; 
    width: 500px; 
    height: 250px; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Tutaj Live View: https://jsfiddle.net/w9bpy1t4/

Answer 5

jeśli u znać wysokość wewnętrznej div następnie można korzystać położenie względem na opakowaniu jednostkowym i pozycji absolutnej w div wewnętrzny z pewnym marginesem. Tak więc css może być tym

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
position: relative; 
} 
#block { 
border: 1px solid blue; 
width: 500px; 
height: 250px; 
vertical-align: middle; 
position: absolute; 
margin-top: 50%; 
top: -125px; 
}