動作しないパーセンテージとしての行の高さ

行の高さに問題があり、頭がよくなりません。

次のコードは、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>

ただし、行の高さを100％に変更すると、行の高さは有効になりません（または、少なくともdivの100％にはなりません）。

jsfiddleの例

誰かが私が間違っていることを知っていますか？

line-height: 100%高さの100％ではなく、その要素のフォントサイズの100％を意味します。その値は絶対的な長さの単位を（使用しない限り、実際には、行の高さは、常にフォントサイズではなく、高さに対するものであるpx、ptなど）。

私はこの質問が古いことを知っていますが、私にとっては完璧な回避策であることがわかりました。

このcssを中央に配置するdivに追加します。

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

これは毎回機能し、クリーンです。

編集：わかりやすくするために、私はscssを使用しており、垂直方向に中央揃えにしたい直接の子であるすべての親に含める便利なミックスインがあります。

@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;
  }
}

完全な説明： div:beforediv内で、その子の前に要素を追加します。使用する場合、:beforeまたは宣言を:after使用する必要がある場合、content:それ以外の場合は何も起こりませんが、この目的のために、コンテンツを空にすることができます。次に、親の高さが定義されていて、この要素が少なくともインラインブロックである限り、要素に親と同じ高さを指定します。動作が異なるのvertical-alignとは対照的に、親に関連する自己の垂直位置を定義しtext-alignます。

@mixin宣言はSASSユーザーのためであり、それは次のように使用することになります。

div {
    @include vertical-align(middle)
}

行の高さとしてパーセンテージを使用する場合、それはdivコンテナに基づくのではなく、font-sizeに基づきます。

line-height：コンテナーに関連して計算された場合、100％は要素を垂直方向に中央揃えする簡単な方法ですが、それは簡単すぎるため機能しません。

つまり、行の高さの別の言い方です：1em（右？）

要素を垂直方向に中央揃えする別の方法は次のとおりです。

.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" */
}

きれいではないかもしれませんが、機能していて、そのセマンティックです。

<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>

表示：table-cellは、要素を垂直に整列するための一意のテーブルアブリリティーを提供します（少なくとも私はそのユニークだと思います）

これは非常に遅い回答ですが、最近のブラウザでは、親要素も画面の高さの100％であると想定して、vhビューポートユニットを使用できます。 FIDDLE

line-height: 100vh;

ブラウザのサポート

このソリューションはIE9以降で機能します。まず、子の上位置を50％（親の中央）に設定します。次に、translateルールを使用して、子を実際の高さの半分だけ上に移動します。主な利点は、子供の高さを定義する必要がないことです。これは、ブラウザーによって動的に計算されます。JSFiddle

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

よりモダンなアプローチは、これにflexboxを使用することです。これはよりシンプルでクリーンです。しかし、フレキシボックスは、どのような全く異なるパラダイムであるinline-block、floatまたはpositionあるために使用されます。

内部のアイテムを揃えるに.parentは：

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

それはそれについてです。子供たちflexの両親は、自動的にフレックス子項目に変換されます。

flexboxの詳細を読む必要があります。開始するには、このチートシートをご覧ください。https：//css-tricks.com/snippets/css/a-guide-to-flexbox/

その要素の高さに基づいて行の高さを設定できます。要素の高さが200pxの場合、テキストを中央揃えにするには行の高さを200pxに設定する必要があります。

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

<span>Im vertically center</span>