なぜ垂直方向に整列しているのですか？

spanまたはを垂直方向に中央に配置しようとしていますdiv要素を別のdiv要素内でます。しかし、私が置くときvertical-align: middle、何も起こりません。display両方の要素のプロパティを変更しようとしましたが、何も機能しないようです。

これが私のウェブページで現在行っていることです。

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

これが機能しないことを示す実装のjsfiddleです：http ://jsfiddle.net/gZXWC/

これは最良の方法のようです-私の元の投稿からしばらく時間が経過し、これは今やるべきことです：http : //jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

CSS3の使用：

<div class="outer">
   <div class="inner"/>
</div>

CSS：

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

注：これは古いIEでは機能しない場合があります

これを試してください、私にとってはうまくいきます：

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

line-heightを、divを含むのと同じ高さに設定しても機能します

デモhttp://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

flexboxを信頼できない場合... の中心に配置.childし.parentます。ピクセルサイズが不明な場合（つまり、常に）、IE9 +でも問題がない場合に機能します。

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

外側の要素vertical-align: middleではなく、内側の要素を配置する必要があります。line-height外部要素のプロパティと一致するようheightに、外部要素のプロパティを設定します。次に、内側の要素を設定display: inline-blockしline-height: normalます。これにより、内部要素のテキストは通常​​の行の高さで折り返されます。Chrome、Firefox、Safari、IE 8以降で動作します

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

フィドル

私はこれを使用してラッパーdivの中央にすべてを配置し、誰かを助ける場合に備えて-最も簡単だと思いました：

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

ここでは、垂直方向の配置を行う2つの方法の例を示します。私はそれらを使用し、彼らはかなりうまくいきます。1つは絶対配置を使用し、もう1つはflexboxを使用しています。

垂直位置合わせの例

フレキシボックスを使用して、あなたが他の要素の内側に、それ自体で要素を揃えることができますdisplay: flex;使用しますalign-self。あなたはまた、水平方向に整列する必要がある場合は、使用することができますalign-itemsし、justify-contentコンテナインチ

flexboxを使用したくない場合は、positionプロパティを使用できます。コンテナを相対にし、コンテンツを絶対にすると、コンテンツはコンテナ内を自由に移動できます。したがって、コンテンツ内で使用するtop: 0;とleft: 0;、コンテナの左上隅に配置されます。

次に、それを位置合わせするには、上部と左側の参照を50％に変更するだけです。これにより、コンテンツの左上隅からコンテナーの中心にコンテンツが配置されます。

そのため、コンテンツをそのサイズの半分、左上に翻訳することを修正する必要があります。

これは、垂直方向に整列する方法のすばらしい記事です。私はフロート方式が好きです。

http://www.vanseodesign.com/css/vertical-centering/

HTML：

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

そして対応するスタイル：

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

親divをテーブルとして表示し、子divをテーブルセルとして表示するように設定します。次に、子divでvertical-alignを使用して、その値を中央に設定できます。この子div内のすべてが垂直方向に中央揃えになります。

それは簡単です。display:table-cellメインクラスに追加するだけです。

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

このjsfiddleをチェックしてください！

これが最も簡単な最新のソリューションです。何も変更する必要はありません。中央に配置するdivのコンテナーに3行のCSSルールを追加するだけです。Flex Box#LoveFlexBoxが大好き

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

ボーナス

justify-content値は、次のいくつかのオプションに設定することができます。

• flex-start、子divを、親コンテナでフレックスフローが開始する場所に配置します。この場合、それはトップにとどまります。

• center、子divをその親コン​​テナの中央に揃えます。子を中央に配置するためにラッパーを親コンテナーに配置するためにすべての子をラップするために追加のdivを追加する必要がないため、これは本当に素晴らしいです。そのため、これは真の垂直方向の中心になりcolumn flex-directionます（。でも同様に、をに変更するflow-directionとrow、水平方向の中心になります。

• flex-end、子divを、フレックスフローが親コンテナで終了する場所に配置します。この場合、下に移動します。

• space-between、フローの最初からフローの終わりまですべての子を広げます。デモの場合、別の子divを追加して、それらが広がっていることを示します。

• space-around、に似てspace-betweenいますが、フローの最初と最後に半分のスペースがあります。

でvertical-align期待どおりに機能するtdため、に単一のセルを配置tableして、divそのコンテンツを揃えることができます。

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

不格好ですが、私の知る限りでは機能します。他の回避策の欠点はないかもしれません。

高さ100％のテーブル内にコンテンツを配置し、メインdivの高さを設定するだけです

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

スパンまたはdiv要素を別のdiv内で垂直方向に中央揃えするには、親divに対する相対位置と子divに対する絶対位置を追加します。これで、子divはdiv内の任意の場所に配置できます。以下の例では、水平方向と垂直方向の両方で中央揃えします。

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css：

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

これは最新のアプローチであり、CSS Flexbox機能を利用しています。これらのスタイルを.mainコンテナーに追加するだけで、親コンテナー内のコンテンツを垂直方向に配置できるようになりました

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

そして、あなたは行ってもいいです！