div内の可変の高さでコンテンツを垂直方向に中央揃えする方法は？

コンテンツの高さが可変である場合、divのコンテンツを垂直方向に中央揃えする最良の方法は何ですか。私の特定のケースでは、コンテナーdivの高さは固定されていますが、コンテナーの高さが可変である場合にも機能する解決策があればすばらしいでしょう。また、CSSハックや非セマンティックマークアップをまったく、またはほとんど使用しないソリューションが気に入っています。

追加するだけ

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

内側のdivに。

これは、内側のdivの上枠を外側のdivの半分の高さに移動し（top: 50%;）、次に内側のdivをその高さの半分だけ移動します（transform: translateY(-50%)）。これはposition: absoluteまたはで動作しrelativeます。

わかりやすくするために含まれていないベンダープレフィックスがあることtransformを覚えておいてくださいtranslate。

Codepen：http ://codepen.io/anon/pen/ZYprdb

これは、ブラウザーが::before疑似要素CSS-Tricks：Centering in the Unknownをサポートしている限り、この問題に対して私が見つけた最良の解決策のようです。

追加のマークアップは必要なく、非常にうまく機能しているようです。要素がプロパティに従わないため、display: tableメソッドを使用できませんでした。tablemax-height

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

これは私が何度も行う必要があったことであり、一貫したソリューションでは、まだ少し非セマンティックなマークアップといくつかのブラウザ固有のハックを追加する必要があります。css 3のブラウザーサポートを取得すると、罪を犯さずに垂直方向の中央揃えが得られます。

テクニックのより良い説明については、私がそれを採用した記事を見ることができますが、基本的には、追加の要素を追加し、position:table\table-cell非テーブル要素をサポートするIEとブラウザに異なるスタイルを適用することを含みます。

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

特定のブラウザーのセットにスタイルを適用するには、多くの方法（ハック）があります。条件付きコメントを使用しましたが、上記のリンク先の記事を見て、他の2つの手法を確認しました。

注：事前に高さがわかっている場合、テキストの1行を中央揃えにしようとしている場合、またはその他のいくつかの場合に、垂直方向の中央揃えを取得する簡単な方法があります。詳細がある場合は、ブラウザのハッキングや非セマンティックマークアップを必要としないメソッドがある可能性があるため、詳細を入力してください。

更新： CSS3のブラウザーサポートが改善され始めており、（他の効果の中で）垂直方向の中央揃えを取得するための代替方法として、フレックスボックスと変換の両方を提供しています。最新の方法の詳細については、この別の質問を参照してください。ただし、ブラウザーのサポートはまだCSS3に対して大まかなものであることに注意してください。

子セレクターを使用して、上記のFadiの信じられないほどの答えを取り上げ、適用できる1つのCSSルールだけにまとめました。これで、必要なのは、contentCentered中央に配置する要素にクラス名を追加することだけです。

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

分岐したCodePen：http ://codepen.io/dougli/pen/Eeysg

これまでのところ、私にとって最良の結果：

中央に配置するdiv：

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

マージン自動を使用できます。flexでは、divも垂直方向の中央に配置されているようです。

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

私にとってこれを行う最良の方法は次のとおりです。

.container{
  position: relative;
}

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

利点は、高さを明示的にする必要がないことです

これは、div動的（パーセンテージ）の高さを持つのための私の素晴らしいソリューションです。

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

自分で試してみてください。

以下のコードのようなフレックスディスプレイを使用できます：

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>