907

800 ピクセルに設定されたdivタグがあります。ブラウザーの幅が800 ピクセルを超える場合、を引き伸ばすべきではありませんが、ページの中央に表示する必要があります。widthdiv

4

27 に答える 27

1189 
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
于 2009-06-05T01:49:10.453 に答える
335

position: absolute次にtop:50%、left:50%上端を画面の垂直方向の中央に配置し、左端を水平方向の中央に配置します。次にmargin-top、div の高さの負の値、つまり -100 を追加すると、上に 100 シフトされmargin-leftます。これdivにより、ページのちょうど中央に が表示されます。

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>

于 2012-05-29T07:55:15.303 に答える
152

Flexboxソリューションは、2015 年以降の導入方法です。justify-content: center親要素がコンテンツをその中心に揃えるために使用されます。

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}

出力

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 400px; 
  padding: 10px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>

于 2015-08-17T17:25:29.990 に答える
65

  1. 縦または横の中央に配置したいということですか？を 800 ピクセルに指定し、がそれより大きいheight場合に div が伸びないようにしたいと言いました...width

  2. margin: auto;水平方向に中央揃えするには、CSSで属性を使用できます。また、bodyandhtml要素にマージンやパディングがないことを確認する必要があります。

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
于 2009-06-05T01:47:42.030 に答える
56 
<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
于 2013-01-16T15:06:53.627 に答える
39

Internet Explorer 6 でも正しく動作させるには、次のようにする必要があります。

HTML

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

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
于 2009-06-05T07:54:07.560 に答える
30

次のように使用することもできます。

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>
于 2012-12-01T10:45:36.750 に答える
29

コンテンツのサイズを固定せずに、親の内側で垂直方向および水平方向に中央揃えされた Div

このページでは、いくつかの解決策の概要を説明しています。ここで共有するにはコードが多すぎますが、可能なことを示しています...

個人的には、有名な transform translate -50% トリックを使用したこのソリューションが最も気に入っています。要素の固定 (% または px) および未定義の高さと幅の両方でうまく機能します。
コードは次のように単純です。

HTML:

<div class="center"><div>

CSS:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */

  /* optional size in px or %: */
  width: 100px;
  height: 100px;
}

ここで、それが機能することを示すフィドル

于 2013-04-30T12:27:31.470 に答える
23

centerタグの直後にタグを使用し、body終了のcenter直前でタグをbody終了します。

<body>
    <center>
        ... Your code here ...
    </center>
</body>

これは、私が試したすべてのブラウザでうまくいきました。

于 2012-05-11T10:45:32.550 に答える
7

divページのセンタリングL＆Rを妨げる古いコードからのその他の既存のセットアップは次のとおりです。

  1. 外部スタイルシートリンクに隠されている他のクラス。
  2. のようなものに埋め込まれた他のクラスimg（古い外部CSS印刷形式コントロールなど）。
  3. IDやCLASSESを含む凡例コードは、名前付きクラスと競合しdivます。
于 2012-05-16T17:20:32.567 に答える
6

div 幅を指定せずにセンタリング:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

これは<center>tag のようなものですが、次の点を除きます。

  • のすべての直接インラインの子要素 ​​(例: <h1>)<center>も中央に配置されます
  • inline-block 要素はdisplay:block、ブラウザーのデフォルトに従って (設定と比較して)異なるサイズを持つことができます
于 2014-01-31T12:25:05.920 に答える
6

以下のコードを使用して、div ボックスを中央に配置します。

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}
<div class="box-content">
</div>

于 2016-12-15T07:43:23.210 に答える
6

1行のテキストだけでなく、通常のコンテンツがある場合、私が知っている唯一の理由は、マージンを計算することです.

次に例を示します。

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

だから、#supercontainerはあなた"whole page"で、それwidthは1200pxです。

#middlecontainerdivあなたのサイトのコンテンツです。ですwidth 102px。コンテンツのサイズがわかっている場合はwidth、ページのサイズを 2 に分割し、結果からコンテンツの半分を差し引く必要がありますwidth: 1200 / 2 - (102 / 2) = 549;

はい、これはCSS の重大な失敗であることもわかりました。

于 2010-11-26T20:48:20.803 に答える
5 
.middle {
   margin:0 auto;
   text-align: center;
}

/* div を中央に移動します */

于 2015-06-18T14:14:13.353 に答える
3

これはInternetExplorerでも機能しますが、自動マージンは機能しません。

.centered {
    position: absolute;
    display:  inline-block;
    left:     -500px;
    width:    1000px;
    margin:   0 50%;
}
于 2012-04-09T20:02:04.403 に答える
1 
<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

垂直位置を変更する場合は、値を 250 に変更すると、必要に応じてコンテンツを配置できます。幅やその他のパラメータを指定する必要はありません。

于 2014-10-29T11:50:55.047 に答える