どのように垂直にセンタリング本部長のためのすべてのブラウザ?

https://stackoverflow.com/questions/396145

29-08-2019
|

質問

いセンター div 垂直CSS.いテーブルやJavaScript、純粋。このソフトウェア技術者が欠Internet Explorer6対応。

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

たいのですが、センター div 垂直にするために、すべての主要なブラウザは、Internet Explorer6?

解決

以下は、私が垂直方向と水平方向中央固定幅に構築することができる最高の万能ソリューション、を柔軟高さのコンテンツボックスです。これは、テストとFirefox、オペラ、クロム、および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>

ビューA実施例動的コンテンツを含むの

私は柔軟性をテストするために、いくつかの動的なコンテンツに建てられ、誰もがそれに問題を見ているかどうかを知るのが大好きです。それは中心のオーバーレイものために働く必要があります - 。ライトボックス、ポップアップ、など。

他のヒント

もう 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 での絶対的な水平方向と垂直方向のセンタリング}

最も簡単な方法は、CSSの次の 3行のだろう

の 1）位置：相対; の

の 2）上部：50％; の

の 3）変換：移動Y（-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>

は、実はあなたは垂直センタリングのための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>

ここ

この結果rel="noreferrer">

今フレキシボックスソリューションは、最近のブラウザのために非常に簡単な方法ですので、私はあなたのためにこれをお勧めします：

.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>

これは、すべての時間を私が発見し、私はそれを使用する最も簡単な方法です（ jsFiddleここをデモ）

この記事のCSSのトリックからクリス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で始まります。

多くの研究の後、私はついに究極の解決策を見つけました。これはフローティング要素のためにも機能します。ソースの表示の

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

ページ上の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>

別のオプションは、変換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>

フレキシボックスソリューション

のメモの
1.親要素は、クラス名を与えられている。
ブラウザがをサポートrel="noreferrer">あなたの

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

誰かは、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>

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

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

要素をセンタリングするために近代的な方法は、垂直を使用することです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>

垂直方向のみ中央揃え

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>

こちらも参照 このフィドル!

水平方向と垂直方向のセンタリング

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

内側のコンテナ:

すべきだった 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>

こちらも参照 このフィドル!

.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>

関連している：画像を中央に配置する

ここに戻らなければならないときはいつもここに行きますこの問題.

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

親コンテナを次のように指定します position:relative または position:absolute.
子コンテナに固定の高さを指定します。
セット position:absolute そして top:50% 子コンテナ上でをクリックして、上部を親の中央まで移動します。
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>

私が書いたこのCSSと知りを行ってください: この記事縦ろだけで3ラインのCSS.

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

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>

Billbadからの回答はわずか.innerのdiv要素の固定幅で動作します。このソリューションは、text-align: center divのに属性.outerを追加することにより、ダイナミック幅で動作します。

.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>

次のリンクは、CSS 内のわずか 3 行でこれを行う簡単な方法を示しています。

わずか 3 行の CSS であらゆるものを垂直方向に配置.

へのクレジット: セバスチャン・エクストローム.

質問にはすでに答えがあることは知っていますが、リンクの簡潔さの有用性を感じました。

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

グリッド

から： Mozilla - Grid Documentation - 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>

フレックスボックス

ブラウザのサポート: フレックスボックスブラウザのサポート

CSS:

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

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

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

この回答の前のバージョンで不完全な点が見つかったので、この回答を追加しています（スタックオーバーフローでは単純にコメントすることはできません）。

現在の div がボディ内にあり、コンテナ div がない場合、'position' 相対によりスタイルが台無しになります。ただし、「固定」は機能するように見えますが、明らかにビューポートの中央のコンテンツを固定します。
また、いくつかのオーバーレイ div を中央揃えするためにこのスタイルを使用しましたが、Mozilla では、この変換された div 内のすべての要素の下の境界線が失われていることがわかりました。おそらくレンダリングの問題。ただし、それらの一部に最小限のパディングだけを追加すると、正しくレンダリングされました。Chrome と Internet Explorer は（驚くべきことに）パディングを必要とせずにボックスをレンダリングしました。

私はフレキシボックスを使用せずに、すべてのブラウザのための固溶体を考える - 「揃える-アイテム：センター;」ディスプレイの組み合わせである：表と垂直整列：中央;

。

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/する

CSSグリッド

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

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

私は（変化幅、高さ、マージントップ及びマージン左に応じて）これでそれをやりました

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

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

特に相対的（未知の）高さを持つ親のdivのために、不明でセンタリングの解決策は私のために素晴らしい作品。記事のいくつかの本当に素敵なコード例があります。

これは、クロム、Firefoxの、オペラ、および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>

私が最近見つけたトリックがあります：あなたは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>

新規参入のために試してみてください。

display: flex;
align-items: center;
justify-content: center;

私はそれが最も正確な「H」のレイアウトを提供し、理解することは非常に簡単です...この1つは、最も便利ます。

>「PageContent」 -

このマークアップでの利点は、1つの場所であなたのコンテンツのサイズを定義することです。
ページの背景の色と水平マージンは、それらの対応する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;
}

の内容を容易にフレキシボックスを使用してセンタリングすることができます。次のコードは、コンテンツが中央する必要がある内部容器のために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;
}

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow