web-dev-qa-db-ja.com

画面の水平方向と垂直方向にdivを中央に配置しようとしています

私は画面の真ん中に私のウェブサイトセンターのランディングページのdivを作成しようとしていますが、それは機能していません。

ここに私のコードがあります

CSS：

.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}

HTML：

<div id="centerDiv" class="centerDiv">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>

ありがとう。

htmlcsscenter
23
user1141887

注：divを水平および垂直に中央に配置しようとしている場合は、 flexbox を調べることをお勧めします。フォールバックサポートを提供する必要がありますが、flexboxは未来であり、それは驚くべきことです。

更新：flexboxはすべての 現代のブラウザ でサポートされています。

まず、divに静的な幅と高さを指定する必要があります。

次に、position: absolute;とleft: 50%; top: 50%;を設定する必要があります。次に、高さと幅の半分であるmargin-leftとmargin-topを実行する必要があります。その後、正しく表示されます。

CSS：

.centerDiv{
  width: 800px;
  border-radius: 5px;
  background: #ccc;
  padding: 10px;
  height: 50px;
  position: absolute;
  margin-top: -25px;
  margin-left: -400px;
  top: 50%;
  left: 50%;
}

http://jsfiddle.net/wJ7dY/

追伸実際にテキストを読むことができるように、スタイルを少し変更しました。お役に立てれば！

29
Jassi

このコード（ demo ）は、widthおよびheightを設定できるようにします。他のプロパティを更新する必要はありません（例：top = height / 2）または十分にサポートされていない技術に依存している（例：display:table;。 1つの欠点は、古いIEバージョンがサポートされていないことです。これをIEのみの別のソリューションと組み合わせることは、おそらく最善の策です。

CSS：

.absoluteCenter {
 /* Must manually set width/height */
 width:800px;
 height:500px;

 /* The magic centering code */
 margin:auto;
 position:absolute;
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */

 /* Prevent div from overflowing main window */
 max-width:100%;
 max-height:100%;
 overflow:auto;
}

/* IE 7 and Below */
:first-child+html .absoluteCenter,
* html .absoluteCenter {
 /* Place code here to override all above values, and add IE friendly centering */
}

そしてHTML：

<div class="absoluteCenter">
 Content of DIV
</div>
15
0b10011

探しているのはdisplay:tableとdisplay:table-cellです。このオプションは、＃center要素の高さに関係なく、＃parent要素内の#center要素を垂直に揃える必要があります。ただし、＃parent要素には高さが必要だと思います。

[〜＃〜] html [〜＃〜]

<div id="parent">
<div id="center">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>
</div>

[〜＃〜] css [〜＃〜]

#parent{
display: table;
width: /* Your width */;
height: /* Your height */;
}

#center{
position: relative;
display: table-cell;
width: /* Your width */;
height: /* Your height */;
vertical-align: middle;
margin: 0 auto;
}

昨日、bodyでdisplay:tableを使用してこれを使用しました。この手法は IE8と互換性があります でなければなりません

5
Vian Esterhuizen

以下を試してください：

 .centerDiv{
     position: absolute;
     top: 50%;
     height: 400px;
     margin-top: -200px; /* Half of the height */
     left: 50%;
     width:800px;
     margin-left: -400px; /* Half of the width */
     border-radius: 5px;
     background:#111;
     padding:10px;
 }
1
MarkSmits

マージンを0 autoではなくautoに設定すると、高さが必要になります。私はあなたの目的のために100％だと思います。

0
Sven Bieder