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

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

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

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

もちろん、あなたが設定する必要はありませんwidthし50%。幅よりも小さい幅でも<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>

インナーに固定幅を設定したくない場合divは、次のようにします。

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

#inner {
  display: inline-block;
}

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

これにより、インナーdivがで中央揃えできるインライン要素になりますtext-align。

最良のアプローチはCSS 3を使用することです。

ボックスモデル：

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

子要素の中央揃えについて詳しく読む

• リンク2

• リンク3

• リンク4

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

• W3Cボックスモデルの方が優れているのはなぜですか？

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

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

親要素が配置されていることを確認してください。つまり、相対、固定、絶対、または固定です。

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

https://jsfiddle.net/gjvfxxdj/

CSS計算値（） 、コードはさらに簡単得ることができます：

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

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

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

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

#outer {
  position: relative;
}

そして...

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

また、画面のサイズcenterを変更しても同じ状態が維持されます。

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

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

したがって、完全を期すために、ここでは、フレキシブルボックスレイアウトモジュールを使用してCSS 3を中央に配置する最新の方法を示します。

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

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

flexboxの古い構文を使用する古いブラウザをサポートする必要がある場合は、こちらをご覧ください。

固定幅を設定せず、余白も必要ない場合はdisplay: inline-block、要素に追加します。

以下を使用できます。

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

不明な高さと幅の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またはJSBinでさらに調整してください。

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

CSS 3のbox-alignプロパティ

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

設定するwidthと、セットをmargin-leftしてmargin-rightまでauto。ただし、これは水平方向のみです。両方の方法が必要な場合は、両方の方法を使用します。実験することを恐れないでください。何かを壊すようなものではありません。

私は最近display:none;、ページの中央に配置する必要がある表形式のフォームが含まれる「非表示」div（つまり）を中央に配置する必要がありました。非表示のdivを表示し、CSSコンテンツをテーブルの自動生成幅に更新し、マージンを中央に変更するために、次のjQueryコードを記述しました。（表示トグルはリンクをクリックするとトリガーされますが、このコードを表示する必要はありませんでした。）

注：このコードを共有しています。GoogleがこのStack Overflowソリューションを提供してくれたので、非表示の要素に幅がなく、表示されるまでサイズ変更/中央揃えできないことを除いて、すべてが機能しました。

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

私が通常行う方法は、絶対位置を使用することです。

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

これを機能させるために、外側のdivに追加のプロパティは必要ありません。

FirefoxおよびChromeの場合：

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Internet Explorer、Firefox、およびChromeの場合：

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

このtext-align:プロパティは、最新のブラウザーではオプションですが、レガシーブラウザーサポートのInternet Explorer Quirksモードでは必須です。

使用する：

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

要素の1つに幅を設定する必要のない、このための別の解決策は、CSS 3 transform属性を使用することです。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

秘訣はtranslateX(-50%)、#inner要素をそれ自体の幅の50％左に設定することです。垂直方向の配置にも同じトリックを使用できます。

これは、水平方向と垂直方向の配置を示すフィドルです。

詳細については、Mozilla Developer Networkをご覧ください。

彼のブログで「Centering in the Unknown」の優れた投稿を書いたChris Coyier 。複数のソリューションをまとめたものです。この質問に掲載されていないものを投稿しました。Flexboxソリューションよりも多くのブラウザーサポートがあり、display: table;他のものを壊す可能性のあるものを使用していません。

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

私は最近アプローチを見つけました：

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

正しく機能するには、両方の要素が同じ幅でなければなりません。

たとえば、このリンクと以下のスニペットをご覧ください。

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

親の下に多数の子供がいる場合、CSSコンテンツは次のfiddleの例のようにする必要があります。

HTMLコンテンツは次のようになります。

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

次に、フィドルのこの例を参照してください。

水平方向のみのセンタリング

私の経験では、ボックスを水平方向に中央揃えする最良の方法は、次のプロパティを適用することです。

コンテナ：

• すべきだった text-align: center;

コンテンツボックス：

• すべきだった display: inline-block;

デモ：

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

こちらのフィドルもご覧ください！

水平方向と垂直方向の両方の中央揃え

私の経験では、ボックスを垂直方向と水平方向の両方に中央揃えする最良の方法は、追加のコンテナーを使用して次のプロパティを適用することです。

外側のコンテナ：

• すべきだった display: table;

内部コンテナ：

• すべきだった display: table-cell;
• すべきだった vertical-align: middle;
• すべきだった text-align: center;

コンテンツボックス：

• すべきだった display: inline-block;

デモ：

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

こちらのフィドルもご覧ください！

最も簡単な方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

コンテンツの幅が不明な場合は、次の方法を使用できます。次の2つの要素があるとします。

• .outer -全幅
• .inner -幅が設定されていません（ただし、最大幅を指定できます）

要素の計算された幅がそれぞれ1000ピクセルと300ピクセルであるとします。次のように実行します。

1. .inner内側にラップ.center-helper
2. 作る.center-helperインラインブロックを。.inner横300ピクセルと同じサイズになります。
3. .center-helper親に対して50％右にプッシュします。これにより、左が500ピクセルに配置されます。アウター。
4. .inner親に対して50％左にプッシュします。これは、左を-150ピクセルに配置します。左が500-150 = 350ピクセルであることを意味する中央ヘルパー。アウター。
5. .outer水平スクロールバーを防ぐために、オーバーフローを非表示に設定します。

デモ：

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

あなたはこのようなことをすることができます

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

これも#inner垂直に配置されます。必要ない場合は、displayおよびvertical-alignプロパティを削除してください。

ここにあなたが最短の方法で欲しいものがあります。

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

テキスト配置：中央

text-align: centerインラインコンテンツの適用は、ラインボックス内の中央に配置されます。ただし、内側のdivにはデフォルトでwidth: 100%特定の幅を設定するか、次のいずれかを使用する必要があります。

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

マージン：0自動

を使用することmargin: 0 autoも別のオプションであり、古いブラウザの互換性に適しています。と連動しdisplay: tableます。

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

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

フレックスボックス

display: flexブロック要素のように動作し、フレックスボックスモデルに従ってコンテンツをレイアウトします。で動作しjustify-content: centerます。

注意： Flexboxはほとんどのブラウザと互換性がありますが、すべてとは限りません。ブラウザの互換性の完全で最新のリストについては、こちらをご覧ください。

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

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

変身

transform: translateCSSビジュアルフォーマットモデルの座標空間を変更できます。これを使用すると、要素を移動、回転、拡大縮小、傾斜させることができます。水平方向に中央揃えするにはposition: absolute、とが必要ですleft: 50%。

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

<center> （非推奨）

タグ<center>はHTMLの代替text-align: centerです。古いブラウザとほとんどの新しいブラウザで動作しますが、この機能は廃止され、Web標準から削除されているため、適切な方法とは見なされていません。

#inner {
  display: inline-block;
}

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

あなたはdisplay: flexあなたの外側のdivに使用することができ、水平方向に中央に追加する必要がありますjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

または、他のアイデアについては、w3schools-CSS flex propertyにアクセスしてください。

Flexはブラウザのサポート範囲が97％を超えており、数行以内にこの種の問題を解決する最良の方法である可能性があります。

#outer {
  display: flex;
  justify-content: center;
}

さて、私は多分すべての状況に適合するソリューションを見つけることができましたが、JavaScriptを使用しています：

ここに構造があります：

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

そして、これがJavaScriptスニペットです。

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

レスポンシブアプローチで使用する場合は、以下を追加できます。

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

この方法も問題なく機能します。

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

インナーのために<div>、唯一の条件は、そのことにあるheightとすると、widthそのコンテナのものより大きくてはなりません。

私が見つけたオプションが1つありました。

誰もが使うように言います：

margin: auto 0;

しかし、別のオプションがあります。親divにこのプロパティを設定します。それはいつでも完全に機能します：

text-align: center;

そして、見て、子供はセンターに行きます。

そして最後にあなたのためのCSS：

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}