1551

divCSSでaを縦中央揃えにしたい。テーブルや JavaScript は必要ありませんが、純粋な CSS のみが必要です。解決策をいくつか見つけましたが、すべて Internet Explorer 6 のサポートがありません。

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

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

4

47 に答える 47

1488

以下は、幅が固定で高さが柔軟なコンテンツ ボックスを垂直方向および水平方向に中央揃えにするために構築できる、最適な万能ソリューションです。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>

動的コンテンツを使用した実際の例を見る

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

于 2011-05-31T03:13:13.010 に答える
313

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

1) 位置: 相対的。

2) 上: 50%;

3) 変換: 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>

于 2014-12-17T18:30:23.173 に答える
175

現在、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>

于 2016-12-15T13:08:17.490 に答える
140

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

これが結果です。

于 2008-12-28T15:15:06.723 に答える
80

編集 2020: Internet Explorer 8などの古いブラウザーをサポートする必要がある場合にのみ使用してください (これは拒否する必要があります)。そうでない場合は、Flexboxを使用してください。

これは私が見つけた最も簡単な方法で、常に使用しています ( 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>

サポートは Internet Explorer 8 から開始されます。

于 2014-02-20T21:05:30.537 に答える
76

多くの研究の後、最終的に究極の解決策を見つけました。フローティング要素でも機能します。ソースを表示 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
于 2015-05-19T12:04:16.877 に答える
58

これを実現するには、 CSS Flexbox align-itemsプロパティを使用します。

html, body {
    height: 100%;
}

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>

于 2016-03-30T01:30:13.590 に答える
37

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>

于 2013-08-13T04:06:03.797 に答える
22

残念ながら、驚くことではありませんが、解決策は思ったよりも複雑です。残念ながら、垂直方向に中央揃えする div の周りに追加の div を使用する必要があります。

Mozilla、Opera、Safari などの標準準拠のブラウザーの場合、外側の div をテーブルとして表示し、内側の div をテーブル セルとして表示するように設定する必要があります。Internet Explorer の場合、内側の divを外側の div 内に完全に配置し、上部を50%として指定する必要があります。次のページでは、この手法について詳しく説明し、いくつかのコード サンプルも提供しています。

JavaScriptを使って縦方向のセンタリングを行う手法もあります。JavaScript と CSS を使用したコンテンツの垂直方向の配置は、それを示しています。

于 2008-12-28T17:09:26.650 に答える
17

要素を垂直方向に中央揃えする最新の方法は、 を使用することflexboxです。

高さを決定する親と、中央に子供が必要です。

以下の例では、ブラウザ内で div を中央に配置します。（私の例で）重要なのは、コンテナに設定しheight: 100%てbodyからコンテナに設定することです。htmlmin-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>

于 2014-10-20T13:37:54.740 に答える
14

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

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>

この 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>

この Fiddleも参照してください。

于 2016-01-21T02:11:42.850 に答える
10

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

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

  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>
于 2011-07-22T05:55:13.163 に答える
8

私はこの CSS を書きました。詳細については、次の記事を参照してください。

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
于 2016-09-27T05:53:55.803 に答える
5

を使用した 3 行のコードはtransform、最新のブラウザーと 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' 相対はスタイリングを台無しにします。ただし、「固定」は機能しているように見えますが、明らかにコンテンツをビューポートの中央に固定します 位置: 相対的

  2. また、このスタイリングを使用していくつかのオーバーレイ div を中央に配置したところ、Mozilla では、この変換された div 内のすべての要素が下の境界線を失っていることがわかりました。おそらくレンダリングの問題です。しかし、それらのいくつかに最小限のパディングを追加すると、正しくレンダリングされました。Chrome と Internet Explorer は (驚くべきことに) パディングを必要とせずにボックスをレンダリングしました 内部パディングなしのモジラ パディング付きのモジラ

于 2015-09-18T09:08:52.833 に答える
4

ただそれをしてください：あなたのクラスを追加してくださいdiv：

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

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

于 2015-03-17T06:20:45.027 に答える
4

Billbad からの回答は、.innerdiv の固定幅でのみ機能します。このソリューションは、属性text-align: centerを.outerdiv に追加することにより、動的な幅に対して機能します。

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

于 2014-07-04T09:03:27.453 に答える
3

私はこれでそれを行いました（それに応じて幅、高さ、margin-top、およびmargin-leftを変更します）：

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

<div class="wrapper"> -- Content -- </div>
于 2013-01-26T18:02:21.700 に答える
2

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

于 2014-11-20T09:28:36.507 に答える
1

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

height:268px- display:tablemin-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>
于 2014-07-21T09:00:17.423 に答える
1

The following is working in my case and was tested in Firefox.

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

The div's height and parent's height are dynamic. I use it when there are other elements on the same parent which is higher than the target element, where both are positioned horizontally inline.

于 2015-12-23T17:09:11.713 に答える
0

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

<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%);
}

詳しくは

于 2014-12-16T05:07:12.027 に答える
0

プロパティを使用する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>

記事全文はこちら

于 2015-02-10T09:59:38.260 に答える
0

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

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
于 2016-07-02T11:15:23.670 に答える
0

最善の方法は次のとおりです。

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

この場合、div の高さの半分であるため、150 ピクセルです。

于 2015-08-26T03:17:28.983 に答える
0

これは最も簡単な方法であり、ノンブロッキング要素でも機能します。唯一の欠点は Flexbox であるため、古いブラウザーはこれをサポートしません。

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

CodePen へのリンク:

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

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

于 2016-04-05T17:36:54.553 に答える
-1

Internet Explorer 6 を含む Web ページでボックスを垂直方向に配置するには、次を使用できます。

  1. 条件付きコメント
  2. haslayoutプロパティ_
  3. display: table-value他の人のために（そして今はフレックス）

フィドル

/* Internet Explorer 8 and others */
.main {
  width: 500px;
  margin: auto;
  border: solid;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}
<!-- [if lte IE 7]>
<style> /* Should be in the <head> */
    html, body , .ie {
        height: 100%;
        text-align: center;
        white-space: nowrap;
    }
    .ie , .main{
        display: inline; /* Used with zoom in case you take a block element instead an inline element */
        zoom: 1;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }
</style>
<b class="ie"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

height: 100%実際、Internet Explorer 7 は、HTML/body 要素に厳密に適用される唯一のものであるため、いくつかの問題を引き起こします。

しかし、これは過去のことであり、古いバージョンの Internet Explorer をいまだに気にかけている人table/table-cellは、まったく問題なく、display: flex有望であり、display: gridいつか現れるでしょう。

フレックスを介した別の今日の例

html {
  display: flex;
  min-height: 100vh;/* or height */
}

body {
  margin: auto;
}
<div>Div to be aligned vertically</div>

于 2015-03-13T19:42:58.093 に答える
-3

これは、コードがほとんどない簡単な方法です。

CSS コード:

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML コード:

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

あなたのテキストはページの真ん中になります!

于 2015-03-26T01:25:59.757 に答える
-4

これは私の場合に機能しました（最新のブラウザでのみテストされています）：

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}
于 2016-09-06T15:48:35.493 に答える