wysokość linii jako procent nie działa

Mam problem z wysokością linii, którego nie mogę sobie wyobrazić.

Poniższy kod wyśrodkuje obraz w elemencie div:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

Jeśli jednak zmienię wysokość linii na 100%, to wysokość linii nie zadziała (lub przynajmniej nie stanie się 100% div).

Przykład jsfiddle

Czy ktoś wie, co robię źle?

line-height: 100%oznacza 100% rozmiaru czcionki tego elementu, a nie 100% jego wysokości. W rzeczywistości, wysokość linii jest zawsze w stosunku do rozmiaru czcionki, nie wysokości, jeżeli jego wartość nie wykorzystuje jednostkę bezwzględna ( px, ptitp).

Wiem, że to pytanie jest stare, ale znalazłem dla mnie idealne obejście.

Dodaję ten css do div, który chcę wyśrodkować:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

To działa za każdym razem i jest czysty.

Edycja: tylko ze względu na ukończenie, używam scss i mam poręczną mieszankę, którą dołączam do każdego rodzica, który jest bezpośrednim dzieckiem, które chcę mieć wyśrodkowane w pionie:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

Pełne wyjaśnienie: div:beforedoda element wewnątrz elementu div, ale przed jakimkolwiek jego elementem podrzędnym. Podczas korzystania :beforelub :aftermusimy użyć content:deklaracji, w przeciwnym razie nic się nie stanie, ale dla naszego celu zawartość może być pusta. Następnie mówimy elementowi, aby był tak wysoki jak jego rodzic, o ile jego wysokość jest zdefiniowana i ten element jest co najmniej blokiem inline. vertical-alignokreśla pionową pozycję siebie w stosunku do rodzica, w przeciwieństwie do text-aligntego, który działa inaczej.

@mixinDeklaracja jest dla użytkowników Sass i byłoby wykorzystywane tak:

div {
    @include vertical-align(middle)
}

Gdy używasz wartości procentowej jako wysokości wiersza, nie jest ona oparta na kontenerze div, a raczej na rozmiarze czcionki.

line-height: 100% byłoby łatwym sposobem na wyśrodkowanie elementów w pionie, gdyby zostało obliczone w odniesieniu do kontenera, ale byłoby to zbyt łatwe, dlatego nie działa.

Zamiast tego jest to po prostu inny sposób na powiedzenie wysokości wiersza: 1em (prawda?)

Innym sposobem wyśrodkowania elementu w pionie byłoby:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

może nie jest ładny, ale działa i jest semantyczny;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell daje elementowi unikalną możliwość wyrównania tabeli w pionie (przynajmniej myślę, że jest wyjątkowy)

Jest to bardzo późna odpowiedź, jednak w nowoczesnych przeglądarkach, zakładając, że element nadrzędny również zajmuje 100% wysokości ekranu, można użyć vhjednostki widoku. SKRZYPCE

line-height: 100vh;

Wsparcie przeglądarki

To rozwiązanie działa w IE9 i nowszych. Najpierw ustawiamy górną pozycję dziecka na 50% (środek rodzica). Następnie, używając translatereguły, podnieś dziecko o połowę jego rzeczywistego wzrostu. Główną zaletą jest to, że nie musimy definiować wzrostu dziecka, jest on obliczany dynamicznie przez przeglądarkę. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Bardziej nowoczesnym podejściem jest użycie do tego flexbox, jest prostsze i czystsze. Jednak flexbox to zupełnie inny paradygmat od tego inline-block, czym był floatlub positionbył.

Aby wyrównać elementy w środku .parent, wykonaj:

.parent {
  display: flex;
  align-items: center;
}

O to chodzi. Dzieci z flexrodzicami są automatycznie konwertowane wyginanie elementów podrzędnych.

Powinieneś przeczytać więcej o flexbox, dobrym miejscem do rozpoczęcia jest ten ściągawka: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Możesz ustawić wysokość linii na podstawie wysokości tego elementu. Jeśli wysokość elementu 200px oznacza, że ​​musisz ustawić wysokość linii na 200px, aby wyśrodkować tekst.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

Jest to nowoczesne rozwiązanie, w którym musisz ustawić następujący CSS w module div kontenera lub zewnętrznym div.

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Do elementu, który chcesz wyśrodkować w pionie, można zastosować inne rozwiązanie. Zwróć uwagę, że element div zewnętrzny lub kontenera powinien mieć postać

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

Zwróć uwagę, że zewnętrzna pozycja div lub kontenera powinna być względna.