<div>を水平方向に中央揃えにする方法

2008年09月22日に質問されました。  ·  閲覧回数 4.2M回  ·  ソース

Lukas picture
2008年09月22日

CSSを使用して<div>を別の<div>内で水平方向に中央揃えにするにはどうすればよいですか?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

回答

Justin Poliey picture
2008年09月22日
4935

このCSSを内部の<div>適用できます:

#inner {
  width: 50%;
  margin: 0 auto;
}

もちろん、 width50%に設定する必要はありません。 含まれている<div>よりも小さい幅でも機能します。 margin: 0 autoは、実際のセンタリングを行うものです。

Internet Explorer 8 (およびそれ以降)を対象として

#inner {
  display: table;
  margin: 0 auto;
}

内部要素を水平方向に中央に配置し、特定のwidthを設定しなくても機能します。

ここでの作業例:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

編集

flexboxすると、divを水平方向および垂直方向の中央に配置するのが非常に簡単です。

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

divを垂直方向の中央に揃えるには、プロパティalign-items: center使用します。

Alfred picture
2011年01月21日
1289

内側のdiv固定幅を設定したくない場合は、次のようにすることができます。

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

これにより、内側のdivが、 text-align中央に配置できるインライン要素になります。

Konga Raju picture
2012年08月30日
402

最善のアプローチはCSS3を使用することです。

ボックスモデル:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

使いやすさに応じて、 box-orient, box-flex, box-directionプロパティを使用することもできます。

フレックス

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

子要素の中央揃えについてもっと読む

そして、これはボックスモデルが最良のアプローチである理由を説明しています

nuno_cruz picture
2011年12月02日
266

divの幅が200ピクセルであるとします。

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

親要素が配置されていることを確認します。つまり、相対、固定、絶対、またはスティッキーです。

divの幅がわからない場合は、負のマージンの代わりにtransform:translateX(-50%);使用できます。

https://jsfiddle.net/gjvfxxdj/

CSS calc()を使用すると、コードをさらに簡単にすることができます。


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原則は同じです。 アイテムを中央に置き、幅を補正します。

Tom Maton picture
2013年09月11日
241

この例は、垂直方向水平方向にalignする方法を示すために作成しました。

コードは基本的にこれです:

#outer {
  position: relative;
}

そして...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

また、画面のサイズcenterままになります。

Danield picture
2013年04月22日
227

一部のポスターは、 display:boxを使用してCSS3を中央に配置する方法について言及しています。

この構文は古くなっているため、使用しないでください。 [この投稿も参照

したがって、完全を期すために、 Flexible Box LayoutModuleを使用してCSS3を中心に配置する最新の方法を

したがって、次のような単純なマークアップがある場合:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...そして、ボックス内でアイテムを中央に配置したい場合、親要素(.box)に必要なものは次のとおりです。

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

フレックスボックスに古い構文を使用する古いブラウザをサポートする必要がある場合は、ここを参照してください。

Salman von Abbas picture
2012年05月13日
148

固定幅を設定せず、余分なマージンを必要としない場合は、要素にdisplay: inline-blockを追加します。

次を使用できます。

#element {
    display: table;
    margin: 0 auto;
}
iamnotsam picture
2014年05月18日
114

高さと幅が不明なdivを中央に配置

水平方向と垂直方向。 かなり最新のブラウザ(Firefox、Safari / WebKit、Chrome、Internet Explorer 10、Operaなど)で動作します。

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Codepenまたはいじくりまわします。

Sneakyness picture
2009年07月25日
99

widthを設定し、 margin-leftmargin-rightautoます。 ただし、これは水平方向のみです。 両方の方法が必要な場合は、両方の方法で実行します。 実験することを恐れないでください。 それはあなたが何かを壊すようなものではありません。

gizmo picture
2008年09月22日
98

幅を指定しないと中央に配置できません。 それ以外の場合は、デフォルトで水平方向のスペース全体が使用されます。