web-dev-qa-db-ja.com

すべてのブラウザのdivを垂直方向に中央揃えにする方法

私はCSSで垂直方向にdivを中心に置きたいです。テーブルやJavaScriptは必要ありませんが、純粋なCSSだけが必要です。私はいくつかの解決策を見つけました、しかしそれらのすべてはInternet Explorer 6サポートを欠いています。

<body>
    <div>Div to be aligned vertically</div>
</body>

Internet Explorer 6を含むすべての主要ブラウザでdivを垂直方向に中央揃えするにはどうすればよいですか。

csscross-browseralignmentvertical-alignmentcentering
1249
Burak Erdem

以下は、固定幅、 柔軟な高さ コンテンツボックスを縦方向と横方向の中央に配置するために私が構築できる最良の万能ソリューションです。 Firefox、Opera、Chrome、Safariの最近のバージョンでテストされ動作しています。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

動的コンテンツの実例を見る

私は柔軟性をテストするためにいくつかの動的コンテンツを組み込んでいて、誰かがそれに何か問題があるかどうか知りたいのですが。ライトボックス、ポップアップなど、中央のオーバーレイでもうまく機能するはずです。

1281
Billbad

リストに表示されていないもう1つ：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • クロスブラウザ（Internet Explorer 8 - Internet Explorer 10を含むハックなし）
  • パーセンテージと最小/最大 - で応答する
  • パディングに関係なく中央揃え（ボックスサイズなし）
  • heightは宣言する必要があります（ 可変の高さ を参照）
  • コンテンツ流出を防ぐための推奨設定overflow: auto（オーバーフローを参照）

出典： CSSの絶対水平および垂直方向のセンタリング

262
Yisela

最も簡単な方法は、CSSの次の 3行 です。

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

以下はその例です。

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
199
DrupalFever

実際には、垂直方向のセンタリングには2 divが必要です。内容を含むdivは、幅と高さを持たなければなりません。

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

これが 結果 です。

134
sticks464

これは私が見つけた最も簡単な方法で、いつも使っています（ jsFiddleデモ - ここでは ）

CSS TricksのChris Coyierが この記事 に感謝します。

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

サポートはIE8から始まります。

74
Armel Larcier

現在のflexboxソリューションは現代のブラウザにとって非常に簡単な方法ですので、私はこれをお勧めします。

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
74
Santosh Khalse

多くの調査の結果、私はついに究極の解決策を見つけました。浮遊している要素に対しても機能します。 ソースを見る

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
57
ymakux

Divをページの中央に配置するには、 フィドルリンクを確認してください 。

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>

別の選択肢はフレックスボックスを使うことです、 フィドルリンクをチェックしてください 。

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

もう1つの選択肢は、CSS 3変換を使用することです。

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
32
Moes

Flexboxソリューション

ノート
1。親要素にはクラス名が与えられます。
2。 サポートされているブラウザで必要な場合は、flexベンダーのプレフィックスを追加してください 。

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>
28
Reggie Pinkham

残念なことに - 驚くことではないが - 解決策はそれが望まれるものよりも複雑である。また残念ながら、垂直方向の中央に配置したいdivの周りに追加のdivを使用する必要があります。

Mozilla、Opera、Safariなどの標準準拠ブラウザでは、外側のdivをtableとして表示し、内側のdivをtable-cellとして表示するように設定する必要があります。 _ - 垂直方向の中央に配置できます。 Internet Explorerの場合は、外側のdiv内に内側のdiv 絶対をpositionしてから、50％としてtopを指定する必要があります。次のページでは、この手法について詳しく説明し、いくつかのコードサンプルも提供しています。

JavaScriptを使用して垂直方向のセンタリングを実行する手法もあります。 JavaScriptとCSSによるコンテンツの垂直方向の配置 それを示しています。

20
sids

誰かがInternet Explorer 10（およびそれ以降）だけを気にかけている場合は、flexboxを使用してください。

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Flexboxのサポート： http://caniuse.com/flexbox

20
bravedick

最も簡単な解決策は以下の通りです。

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
18
Varsha Dhadge

垂直方向にのみ中央揃え

Internet Explorer 6と7を気にしないのであれば、2つのコンテナーを含む手法を使用できます。

外側のコンテナ

  • display: table;があるはずです

内容器：

  • display: table-cell;があるはずです
  • vertical-align: middle;があるはずです

コンテンツボックス：

  • display: inline-block;があるはずです

幅や高さを気にせずに、コンテンツボックスに任意のコンテンツを追加できます。

デモ： 

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

this Fiddle ！も参照してください。

水平方向と垂直方向の中央揃え

水平方向と垂直方向の両方に中央揃えをする場合は、次のものも必要です。

内容器：

  • text-align: center;があるはずです

コンテンツボックス：

  • テキストを中央揃えにする場合を除き、水平方向のテキストの配置をtext-align: left;またはtext-align: right;などに再調整する必要があります。

デモ： 

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

this Fiddle ！も参照してください。

14
John Slegers

要素を垂直方向に中央揃えする現代的な方法は flexbox を使うことです。

あなたは身長を決めるために親と中心にいる子供を必要とします。

以下の例では、divをブラウザ内の中央にセンタリングします。 （私の例では）重要なことはheight: 100%をbodyとhtmlに設定してからmin-height: 100%をあなたのコンテナに設定することです。

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
14
Marwelln
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

関連： 画像の中央揃え

13
antelove

この問題 に戻ってこなければならないとき、これはいつも私が行くところです。

ジャンプしたくない人のために：

  1. 親コンテナをposition:relativeまたはposition:absoluteとして指定します。
  2. 子コンテナに固定の高さを指定します。
  3. 子コンテナにposition:absoluteとtop:50%を設定して、上を親の中央に移動します。
  4. Margin-top：-yyを設定します。ここで、yyはアイテムを上にオフセットするために子コンテナの高さの半分です。

コード内のこの例：

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
10
Ninx

私はこのCSSを書いたばかりなので、もっと詳しく知りたい場合は、 この記事では、たった3行のCSSですべてを揃えてください を参照してください。

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
8
Sanjib Debnath

CSSのflexプロパティを使用

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>

またはdisplay: flex;およびmargin: auto;を使用

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}
<div class="parent">
    <div class="child"></div>
</div>

テキストの中心を表示

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

パーセント（％）の高さと幅を使用

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
6
Deepu Reghunath

次のリンクは、CSSの3行で簡単に実行できる方法を示しています。

たった3行のCSSで縦に並べる 。

：SebastianEkströmへの貸方。

私は質問がすでに答えを持っていることを知っていますが、私はその単純さのためにリンクに有用性を見ました。

4
Hicaro

Billbadからの回答は、固定幅の.inner divでのみ機能します。この解決策は、属性text-align: centerを.outer divに追加することによって、動的幅に対して機能します。

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
4
Ruwen

私はflexboxを使わないですべてのブラウザのための確かな解決策だと思います - "align-items：center;" display：tableとvertical-align：middle;の組み合わせです。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣demo： https://jsfiddle.net/6m640rpp/

3
Martin Wantke

transformを使用した3行のコードは、現代のブラウザとInternet Explorerで実際に動作します。

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

私はこの答えの前のバージョンでいくらかの不完全性を見つけたので、私はこの答えを加えています（そしてStack Overflowは私が単にコメントすることを可能にしないでしょう）。

  1. 現在のdivがボディ内にあり、コンテナdivがない場合、 'position' relativeはスタイルを崩します。しかし、 'fixed'は機能するようですが、明らかにビューポートの中央にあるコンテンツを修正します。 position: relative

  2. また、私はいくつかのオーバーレイdivを中央揃えにするためにこのスタイルを使用し、この変換されたdiv内のすべての要素が下の境界を失っていることを発見しました。おそらくレンダリングの問題です。しかし、それらのいくつかに最小のパディングを追加するだけで正しくレンダリングされました。 ChromeとInternet Explorerは（驚くべきことに）パディングを必要とせずにボックスをレンダリングしました mozilla without inner paddingsmozilla with paddings

3
MandarK

特に相対的な（未知の）高さを持つ親のdivに対して、 未知の中心 解決法は私にはうまくいきます。この記事には本当にいいコードの例がいくつかあります。

Chrome、Firefox、Opera、およびInternet Explorerでテストされています。

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
         <h1>Some text</h1>
         <p>Any other text..."</p>
  </div> 
   </div>
</div>
2
Ruwen

私はこれでそれをやった（それに応じて幅、高さ、マージントップとマージン左を変更する）：

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
2
Netuddki

ブラウザの互換性については答えていませんが、新しいGridとそれほど新しくないFlexbox機能についても言及しています。

グリッド

差出人： Mozilla - グリッドドキュメント - Divを垂直に整列

ブラウザのサポート： グリッドブラウザのサポート

CSS：

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

フレックスボックス

ブラウザのサポート： Flexboxブラウザのサポート

CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
2
ctekk

新参者のために試してください

display: flex;
align-items: center;
justify-content: center;
2
Usman Iqbal

CSSグリッド

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
2
Andy Hoffman

私はこれを使います。 Internet Explorer 8以降で動作します。

height:268px - display:tableの場合、min-heightのように動作します。

CSS：

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML：

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>
1
Rantiev

コンテンツはflexboxを使用して簡単に中央揃えできます。次のコードは、コンテンツを中央に配置する必要があるコンテナのCSSを示しています。

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
1
Mahendra Liya

私はこれが最も有用であると思います。それは最も正確な 'H'レイアウトを与えそして理解するのが非常に簡単です。

このマークアップの利点は、コンテンツのサイズを1か所で定義することです - > "PageContent"。
ページの背景色とその横方向の余白は、対応するdivで定義されています。

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

そして、ここでCSSを分離した：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}
1
G.Y

あなたがブロック要素（例えば）を持っている場合、この解決策は私のために働いた。解決策をより明確にするために色を使用しました。

HTML： 

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS： 

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddleコードデモ

1
Birol Efe

以下は私の場合に働いていて、Firefoxでテストされました。

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

Divの高さと親の高さは動的です。同じ親の他の要素がターゲット要素よりも上にあり、両方が水平方向にインラインに配置されている場合に使用します。

1
KeepMove

私が最近見つけたトリックがあります：あなたはtop 50%を使う必要があります、そして、あなたはtranslateY(-50%)をします

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
1
Melchia

あなたのdivにクラスを追加してください。

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

そして この記事 を読んで説明を読んでください。注：Heightは必須です。

1
Anshul

縦＆横 _中央_

HTML

<div id="dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

楽しい！

0
Armand

最善のことは次のとおりです。

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

これは、この場合のdivの高さの半分だからです。

0
Fastboy619

私はちょうど私のために働いた別の方法を見つけました：

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

詳しくは

0
Rushabh RajeshKumar Padalia

このMixinを宣言してください。

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

それからそれをあなたの要素に含めてください。

.element{
    @include vertical-align();
}
0
Gothburz

これははるかに簡単なアプローチで、非ブロック要素でも機能します。唯一の欠点はFlexboxです。したがって、古いブラウザではこれをサポートしていません。

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

Codepenへのリンク：

http://codepen.io/damianocel/pen/LNOdRp

ここで重要な点は、垂直方向のセンタリングのために、親要素（コンテナ）を定義する必要があり、imgは親要素よりも小さい高さを持つ必要があるということです。

0
damiano celent

このメソッドは変換を使用しません。そのため、出力がぼやけても問題ありません。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
0
th3pirat3

transformプロパティを使うことで垂直方向のdivを簡単にすることができます。

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
<div class="main-div">
    <div class="vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

記事全文はこちら

0
inaam husain