<div>をページの中央(水平/幅)に揃える方法

2009年06月05日に質問されました。  ·  閲覧回数 2.7M回  ·  ソース

Shimmy Weitzhandler picture
2009年06月05日

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

回答

AgileJon picture
2009年06月05日
1139
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
Summo picture
2012年05月29日
324

position: absolute 、次にtop:50%left:50%は、画面の垂直方向の中央に上端を配置し、水平方向の中央に左端を配置し、 margin-top追加します。 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>
m4n0 picture
2015年08月18日
122

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

HTML

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

CSS

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

出力

.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>
Tomas Aschan picture
2009年06月05日
64
  1. 縦または横の中央に配置したいですか? heightを800ピクセルに指定し、 widthがそれよりも大きい場合にdivが伸びないようにしたいとおっしゃいました...

  2. 水平方向に中央揃えするには、CSSのmargin: auto;属性を使用できます。 また、 body html要素と

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Mohammad picture
2013年01月16日
46
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
Kevin Dungs picture
2009年06月05日
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;
}
RajeshKdev picture
2012年12月01日
29

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

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>
Wilt picture
2013年04月30日
23

コンテンツサイズを固定せずに、親の内側で垂直方向と水平方向の中央にDivを配置

このページには、いくつかのソリューションを含む優れた概要があり、ここで共有するにはコードが多すぎますが、何が可能かを示しています...

個人的には、有名な変換を使用したこのソリューションが最も気に入っ
コードは次のように単純です。

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

ここにそれが機能することを示す

Roy picture
2017年08月29日
19

これは、フレックスコンテナを介して簡単に実現できます。

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

プレビューリンク

Bharat Chhatre picture
2012年05月11日
18

単に使うcenter直後にタグをbodyタグ、および終了center直前にタグをbody終了:

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

これは、私が試したすべてのブラウザーで機能しました。