画面の中央に<div>要素を配置する

134

配置したい <div><table>画面サイズに関係なく、画面の中央に（または）要素。言い換えると、「上」と「下」の左側のスペースは等しく、「右側」と「左側」の左側のスペースは等しいはずです。CSSだけでこれを実現したいと思います。

私は以下を試しましたが、うまくいきません：

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

注：要素（または）がWebサイトと共にスクロールするか
どうかは、どちらでも問題ありません。ページが読み込まれたときに中央に配置するだけです。<div><table>

javascript css html

— 住む
ソース

1

<div>をページの中央に配置する方法の

— Purag

こんにちはPurmouさん、ページの中央に配置する場合の質問です。つまり、左右のスペースは同じです。上下のスペースは同じではありません。

— sumit 2013年

1

CSSを使用してDivを垂直方向にセンタリングする最良の方法の

— outis

divのdivを中央に配置する方法-水平方向の

— bjb568 2014年

201

幅と高さが固定されている場合の簡単な方法：

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

インラインスタイルは使用しないでください。これが実際の例http://jsfiddle.net/S5bKq/です。

— アインシュタイン
ソース

13

：動的な高さを求める人のためstackoverflow.com/questions/396145/...

— pulkitsinghalを

1

@ woho87インラインスタイルを使用しないのはなぜですか？よく知られている理由のため、または特定の例について知っておくべきことが他にありますか？

— sharkyが

それはここでは説明し、よく知られている理由のためだ@KatrinRaimond stackoverflow.com/questions/2612483/...、ここwebdesign.about.com/od/css/a/aa073106.htm。

— Alex

ただし、divElementの上部を「％」単位で設定すると、divElementが相対要素内に配置されない限り、divElementは垂直方向のスペースを占有します。

— Sudip

position：fixedまたはposition：absolute？

— Kurkula

151

最近では変換がよりユビキタスにサポートされているため、ポップアップの幅と高さを知らなくてもこれを行うことができます

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

かんたん！JSFiddleここ：http ://jsfiddle.net/LgSZV/

更新： CSSのセンタリングに関するかなり徹底的なガイドについては、https ： //css-tricks.com/centering-css-complete-guide/を確認してください。多くの眼球を獲得しているように見えるので、この回答に追加します。

— XwipeoutX
ソース

1

ポップアップのコンテンツがを使用している場合、overflow:autoIE9でスクロールが失敗します。:(

— joescii 14

2

ユビコではない。IE8は、静止画のブラウザのシェアの20％をし、それをサポートしていません。したがって、これはIE9 +でのみ使用してください。

— fotanus 2014年

7

+1は、高さと幅を指定したり、JavaScriptを使用したりする必要がない唯一のソリューションです。

— Jan Derk、2014

@fotanus開発者がIE 9のサポートを停止すると、<ユーザーはブラウザーを移行または更新します。

— ディエゴビエイラ

@DIegoVieiraこれは残念ながら物事の仕組みではありません。コモンズの悲劇をご覧ください。したがって、人々はこの共有を失いたくないのでIE8をサポートし続け、それが機能するので人々は使い続けるでしょう。

— fotanus 2015年

33

幅と高さを設定すれば問題ありません。

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

要素の寸法を柔軟にしたい場合（そしてレガシーブラウザを気にしない場合）は、XwipeoutXの答えを使用してください。

— エリックアイグナー
ソース

1

これは最もクリーンでシンプルな答えであり、モバイルフレンドリーでもあります。+1

— Rust

22

任意のオブジェクトで機能します。サイズがわからなくても：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— 発光体
ソース

17

HTML 5とCSS 3の方が簡単です。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— ダニエル・デ・レオン
ソース

12

div絶対位置を固定している場合は、上から50％、左から50％、負のマージンの上と左から半分の高さと幅にそれぞれ位置します。ニーズに合わせて調整します。

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— Elclanrs
ソース

9

flexを使用します。はるかにシンプルで、divサイズに関係なく機能します：

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

スニペットを展開

— キャンナー
ソース

3

私はこれをCSSで行います：

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

次にHTMLで：

<div class="centered"></div>

— エドゥアルドラゴアギラール
ソース

0

これを試して

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

またはこれ

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— ダリ
ソース

0

解決策を探している人がいたら

私はこれを見つけました、

私が見つけた最高のソリューションです！

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

お楽しみください！

— クリストファー・アトウッド
ソース

0

ブロックを中央に表示するもう1つの簡単で柔軟なアプローチ：line-heightおよびでネイティブテキストの配置を使用しますtext-align。

解決：

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

そしてhtmlサンプル：

<div class="parent">
  <div class="child">My center block</div>
</div>

私たちは、作るdiv.parentフルスクリーンを、そして彼の単一の子div.childを持つテキストとして整列display: inline-block。

利点：

柔軟性、絶対値なし
サイズ変更をサポート
モバイルで正常に動作します

JSFiddleの簡単な例：https ://jsfiddle.net/k9u6ma8g

— パベル・ショロホフ
ソース

0

絶対位置を使用しない代替ソリューション：
絶対位置の回答がたくさんあります。他のものを壊さずに位置絶対を使用することはできませんでした。だからそれができなかった人のために、ここに私がやったことがあります：https :
//stackoverflow.com/a/58622840/6546317（別の質問への回答として投稿されてい）。

子要素は既に水平方向に中央揃えされているため、ソリューションは垂直方向の中央揃えのみに焦点を当てていますが、別の方法でそれらを水平方向に中央揃えできない場合にも同じことが適用できます。

— reddtoric
ソース

-2

これを試して：

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— ユーザー3423956
ソース

2

これは、効果的に受け入れられた答えと同じです

— apaul

はい、しかし、ここで私は、マージントップの動作を説明し、左...誰かがこのことを知っていない....

— user3423956

1

そして、それが効果的に同じである第二の答え

— apaul