css - 垂直方向に中央揃えにする方法
CSSで親要素内？

Question

小さなユーザー名とパスワードの入力ボックスを作ろうとしています。

質問したいのですが、div を垂直方向に揃えるにはどうすればよいですか?

私が持っているものは次のとおりです。

<div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">
   </form>
   </div>
</div>

ID Username と Form を使用して div を作成し、それ自体を垂直方向に中央に揃えるにはどうすればよいですか? 私は入れようとしました：

vertical-align: middle;

id Login を持つ div の CSS で、しかしそれは動作していないようです。どんな助けでも大歓迎です。

score 270 · Accepted Answer

最新のブラウザーでの最善のアプローチは、flexbox を使用することです。

#Login {
    display: flex;
    align-items: center;
}

一部のブラウザーでは、ベンダープレフィックスが必要です。flexbox をサポートしていない古いブラウザー (例: IE 9 以前) の場合、古い方法のいずれかを使用してフォールバックソリューションを実装する必要があります。

推奨読書

score 13 · Accepted Answer

私はパーティーにかなり遅れていますが、私はこれを自分で思いつきました。これは、垂直方向の配置のための私のお気に入りのクイックハックの 1 つです。とてもシンプルで、何が起こっているのかを理解するのは簡単です。

css 属性を使用して:before、div を親 div の先頭に挿入し、それdisplay:inline-blockをvertical-align:middle指定してから、同じプロパティを子 div に指定します。は線に沿って配置するためvertical-alignのものであるため、これらのインライン div は線と見なされます。

divを作成すると、子:beforedivheight:100%が自動的に追従し、非常に高い「線」の中央に整列します。

.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}

これは、私が話していることを示すフィドルです。子 div は任意の高さにすることができ、マージン/パディングを変更する必要はありません。
そして、ここにもっと説明的な fiddle があります。

が気に入らない場合は:before、いつでも手動で div を挿入できます。

<div class="parent">
    <div class="before"></div>
    <div class="child">
        content
    </div>
</div>

そして、再割り当て.parent:beforeするだけです.parent .before

score 11 · Accepted Answer

高さがわかっている場合は、次のmargin-topようにネガで絶対配置を使用できます。

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

それ以外の場合、CSS だけで div を垂直方向に中央揃えする実際の方法はありません。

score 6 · Accepted Answer

私のFirefoxとChromeではこれが機能します：

CSS:

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align

score 3 · Accepted Answer

このサイトは役に立ちました: http://www.vanseodesign.com/css/vertical-centering/ これは私にとってはうまくいきました:

HTML

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

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

score 3 · Accepted Answer

別の投稿に対する@GáborNagyのコメントは、私が見つけることができる最も簡単な解決策であり、私にとって魅力のように機能しました.jsfiddleを持ってきたので、ここに少し追加してコピーしています:

CSS:

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

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

HTML:

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

水平方向にも配置する場合は、「セル」div 内に別の div「inner-cell」を追加し、次のスタイルを指定する必要があります。

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}

score 1 · Accepted Answer

垂直方向の整列は常に注意が必要です。

ここでは、div を垂直方向に配置する方法について説明しました。

http://jsfiddle.net/3puHE/

HTML:

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS:

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}

score 0 · Accepted Answer

if you are using fix height div than you can use padding-top according your design need. or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.

score -5 · Accepted Answer

div をそのように垂直方向に配置することはできませんが、margin または position:relative を使用して位置を変更することはできます。

css - 垂直方向に中央揃えにする方法CSSで親要素内？

17 に答える 17

HTML:

CSS:

Related

Reference

css - 垂直方向に中央揃えにする方法
CSSで親要素内？