css - 配置 - 垂直方向中央揃え




すべてのブラウザのdivを垂直に配置するにはどうすればよいですか? (20)

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

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

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


Flexboxソリューション

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

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


垂直方向のみセンタリング

Internet Explorer 6および7について気にしない場合は、2つのコンテナを使用するテクニックを使用できます。

外側の容器:

  • display: table;必要がありdisplay: table;

内側のコンテナ:

  • display: table-cell;必要がありdisplay: table-cell;
  • vertical-align: middle;なければなりませんvertical-align: middle;

コンテンツボックス:

  • display: inline-block;必要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: center;

コンテンツボックス:

  • 水平方向のテキスト整列を例えばtext-align: left;再調整する必要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>

このフィドルも見てください!


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

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

私はこの答えの前のバージョンで不完全なものが見つかったので、この答えを追加しています(そして、ではコメントできません)。

  1. 現在のdivが本文にあり、コンテナdivがない場合、 'position' relativeはスタイルを崩します。 しかし、固定されているように見えますが、明らかにコンテンツをビューポートの中心に固定します

  2. また、このスタイリングを使っていくつかのオーバーレイdivを配置し、Mozillaではこの変換されたdiv内のすべての要素が下限を失っていることがわかりました。 おそらくレンダリングの問題です。 しかし、それらのうちのいくつかに最小限のパディングを追加するだけで、正しく描画されました。 ChromeとInternet Explorer(驚くべきことに)は、パディングの必要なしにボックスをレンダリングしました


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

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コードデモ


これは私が見つけた最も簡単な方法で、私はいつも使っています( jsFiddleのデモはこちら

この記事の CSS TricksからChris Coyierに感謝します

.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から始まります。


ちょうどそれを行う:あなたのdivクラスを追加する:

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

そしてこの記事を読んで説明を読んでください 。 注: Heightが必要です。


ビルバッドからの答えは、固定幅の.inner divでのみ機能します。 この解決策は、属性text-align: center.outer divに追加することで、動的な幅で動作しtext-align: center

.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を示しています。

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

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

グリッド

From: Mozilla - グリッドドキュメント - 垂直方向に整列

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

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;

以下は、固定幅で柔軟な高さのコンテンツボックスを垂直方向と水平方向に配置するために構築できる最適なオールラウンドソリューションです。 最近のバージョンのFirefox、Opera、Chrome、Safariでテストされ、動作していました。

.outer {
  display: table;
  position: absolute;
  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>

動的コンテンツを使用した実例の表示

私は柔軟性をテストするためにいくつかの動的コンテンツを構築し、誰かがそれに問題があるかどうかを知りたいと思っています。 ライトボックス、ポップアップなど、中心に配置されたオーバーレイに対してもうまくいくはずです。


多くの研究の後、私は最終的に究極の解決策を見つけました。 浮動要素の場合でも機能します。 ソースを表示

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

実際には、垂直方向のセンタリングに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>

resultはここにあります


最も簡単な解決策は次のとおりです。

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


次のリンクは、あなたのCSSでわずか3行で簡単な方法を示しています:

縦3行のCSSだけを縦に並べます

クレジットSebastianEkström

私は質問が既に答えを持っていることを知っているが、私はそのシンプルさのためにリンクで有用性を見た。


特に、相対的な(未知の)高さを持つ親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>


私がこの問題に戻らなければならない時は、いつもどこに行くのですか。

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

  1. 親コンテナをposition:relativeまたはposition:absoluteとして指定します。
  2. 子コンテナの固定高さを指定します。
  3. 子コンテナのposition:absolutetop: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>

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

height:268px - display:tableは最小高さのように動作します。

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>

私はちょうどこのCSSを書いて、もっと知るためには、次の記事を読んでください。

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

要素を垂直にflexboxする現代的な方法は、 flexboxを使うことflexbox

身長を決めるには親が必要で、子供を集中させる必要があります。

以下の例は、ブラウザ内の中央にdivを配置します。 重要なのは(私の例では) height: 100%bodyhtml height: 100% 、次に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 10(およびそれ以降)のみを気にしている場合は、 flexbox使用し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 ://caniuse.com/flexbox





centering