<div>の中央を垂直方向に揃えます

#abc divat 50pxとtextの高さを維持して、の中央で垂直に整列させたいdiv。

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

を使用できますがline-height: 50px;、ここでは必要vertical-align: middle;ありません。

デモ

複数の行がある場合、上記は失敗します。その場合span、を使用してテキストを折り返すことができ、display: table-cell;とdisplay: table;一緒に使用することvertical-align: middle;もできますwidth: 100%;。#abc

デモ

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

ここで考えられる別の解決策は、明らかにY軸を表すwhereでtransformプロパティを使用することです。それは非常に簡単です...必要なのは、要素の位置をに設定し、後でから位置を設定し、その軸から負に変換しますtranslateY()Yabsolute50%top-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

デモ

これはIE8などの古いブラウザーではサポートされませんが-ms, -moz、-webkitプレフィックスを使用してIE9とその他の古いブラウザーバージョンのChromeとFirefoxを作成できます。

の詳細についてはtransform、こちらを参照してください。

それは簡単です：親divにこれを与えます：

display: table;

子div（s）にこれを与えます：

display: table-cell;
vertical-align: middle;

それでおしまい！

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

古い質問ですが、現在 CSS3を使用すると、垂直方向の配置が非常に簡単になります。

#abc次のCSSに追加するだけです：

display:flex;
align-items:center;

簡単なデモ

元の質問のデモが更新されました

簡単な例：

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

私はこの解決策をSebastianEkströmが見つけました。それは速くて汚い、そして本当にうまくいきます。親の身長がわからなくても：

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

こちらの記事全体をお読みください。

Lineの高さはdivの高さと同じように使用できます。しかし、私にとって最善の解決策はこれです->position:relative; top:50%; transform:translate(0,50%);

追加してみline-heightませんか？

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

フィドル、行の高さ

またはpadding上#abc。これはパディングの結果です

更新

あなたのCSSに追加してください：

#abc img{
   vertical-align: middle;
}

その結果。これがあなたが探しているものであることを願っています。

これを試して：

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

divを中央に配置する別の方法：

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

translateY CSSプロパティを使用して、テキストをコンテナー内で垂直方向に中央揃えにします

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

そして、それをあなたの包含DIVに適用します

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

必要に応じて、移動率を調整します。お役に立てれば

このコードは、固定された高さを指定せずに垂直方向の中央および水平方向の中央に配置するためのものです。

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}