web-dev-qa-db-ja.com

divを垂直方向に中央揃えするには？

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

私は尋ねたいのですが、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ですが、機能していないようです。任意の助けをいただければ幸いです。

cssalignment
108
Crays

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

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

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

推奨読書

202
Andy E

これは3行のCSSで実行でき、IE9との互換性があります（IE9を含む）。

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

例： http://jsfiddle.net/cas07zq8/

クレジット

86
patmood

Divを別のdivに垂直に配置できます。 JSFiddleのこの例 を参照するか、以下の例を検討してください。

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

.innerDivのマージンは次の形式である必要があります：margin: auto *px;

[ここで、*は希望する値です。]

display: inline-flexは、HTML5をサポートする最新（更新版/現在のバージョン）のブラウザーでサポートされています。

Internet Explorerでは動作しない場合があります：P：）

互換性の問題に対処するために、常に垂直に配置されたdiv（つまりinnerDiv）の高さを定義してください。

76
Lalit Kumar

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

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

:before divをheight:100%にすると、子divが非常に高い「行」の中央に自動的に追従して整列します。

.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は任意の高さにすることができ、マージン/パディングを変更する必要はありません。
そして これはもっと説明的なフィドルです 。

:beforeが好きでない場合は、いつでも手動でdivに入れることができます。

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

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

13
Overcode

高さがわかっている場合は、次のように負の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を垂直方向に中央に配置する実際の方法はありません

12
anonymous coward

私のFirefoxとchromeではこれを動作させます：

CSS：

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

別の投稿 に関する@GáborNagyのコメントは、私が見つけることができる最も簡単な解決策であり、私にとって魅力のように働いた。

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>

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

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

このサイトは便利だと思いました： 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;
}
3
testpattern

最小高さを指定する必要がありました

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em
1
Harry Bosh

http://jsfiddle.net/dvL512e7/

位置合わせされたdivの高さが固定されていない限り、位置合わせされたdivに対して次のCSSを使用してみてください。

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}
1
grebenyuksv

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

ここでは、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;}
1
Barun

私は自分にぴったりの方法を見つけました。次のスクリプトは、画面上の空白のサイズの半分の高さの非表示画像（bgcolorまたは透明gifと同じ）を挿入します。効果は完璧な垂直方向の調整です。

ヘッダーdiv（高さ= 100）とフッターdiv（高さ= 50）があり、メインdiv内の整列するコンテンツの高さが300であるとします。

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>

調整するコンテンツの直前にスクリプトを配置します！

私の場合、私が調整したいコンテンツは、アスペクト比が100：85（幅：高さ）の画像（幅= 95％）で、画像の高さは幅の85％です。そして、幅は画面幅の95％です。

したがって、私は使用しました：

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

このスクリプトを

<body onResize="window.location.href = window.location.href;">

スムーズな垂直方向の配置ができます。

これがあなたにも役立つことを願っています！

0
decaff

固定高さdivを使用している場合は、設計上の必要に応じてパディングトップを使用できます。または、top：50％を使用できます。 divを使用している場合、垂直方向の配置は機能しないため、必要に応じてパディングトップまたは位置を使用します。

0
Kali Charan Rajput

div要素を中央に配置する最も簡単な方法は、次のプロパティでこのクラスを使用することです。

.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
0
parag patel

Divの子要素を中央に配置します。すべての画面サイズで動作します

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

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

詳細については、こちらをご覧ください link

0
WasiF