web-dev-qa-db-ja.com

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

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

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
htmlcssalignmentcentering
3946
Lukas

このCSSを内側の<div>に適用することができます。

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

もちろん、widthを50%に設定する必要はありません。含まれている<div>以下の幅であれば問題ありません。 margin: 0 autoは実際の中心合わせをするものです。

あなたがIE8 +をターゲットにしているなら、代わりにこれを持っている方が良いかもしれません：

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

内側の要素を水平に中央にし、特定のwidthを設定せずに動作します。

ここでの作業例：

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

4316
Justin Poliey

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

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

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

これは内側のdivをtext-alignで中央揃えできるインライン要素にします。

1160
Alfred

最善のアプローチは 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%;
}

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

フレックス ：

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

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

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

329
Konga Raju

あなたのdivが200px幅であると仮定します。

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

親要素が 位置 すなわち相対、固定、絶対、または固定であることを確認してください。

Divの幅がわからない場合は、負の余白の代わりにtransform:translateX(-50%);を使用できます。

https://jsfiddle.net/gjvfxxdj/

231
nuno_cruz

（垂直）とhorizo​​ntalalignの作り方を示すために、この 例 を作成しました。

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

#outer {
  position: relative;
}

そして...

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

画面をre-sizeしてもcenterのままです。

210
Tom Maton

いくつかのポスターはdisplay:boxを使ってセンタリングするCSS 3の方法を述べました。

この構文は古くなっており、もう使用すべきではありません。 [ この投稿） もご覧ください。

それで、完全を期すために、ここではフレキシブルボックスレイアウトモジュールを使用して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のための古い構文を使用する古いブラウザをサポートする必要があるならば{ ここ 見るのに良い場所です。

175
Danield

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

あなたが使用することができます：

#element {
    display: table;
    margin: 0 auto;
}
127
Salman Abbas

CSS3のbox-alignプロパティ

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

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

79
gizmo

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

78
Sneakyness

未知の高さと幅の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 でさらに詳しく説明してください。

77
iamnotsam

私は最近、ページの中央に配置する必要があるテーブル形式のフォームを持つ「隠し」div（つまりdisplay：none;）を中央に配置する必要がありました。私は次のjQueryを書いて、隠しdivを表示してからCSSを自動生成された幅のテーブルに更新し、余白を中央揃えに変更しました。 （表示切り替えはリンクをクリックすることで引き起こされますが、このコードは表示に必要ではありませんでした。）

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

55
James Moberg

私は通常それを行う方法は絶対位置を使用しています：

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

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

49
william44isme

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モードでは必要です。

48
ch2o

これが私の答えです。

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

43
Ankit Jain

要素の幅を設定せずにこれを解決するもう1つの方法は、CSS 3のtransform属性を使用することです。

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

水平方向と垂直方向の配置を示す Fiddle です。

より詳しい情報は Mozilla Developer Network にあります。

39
Kilian Stinson

Chris Coyierが自身のブログの 'Unknowning in the Unknown'に 優秀な投稿 を書いた。それは複数の解決策のまとめです。この質問に投稿されていないものを投稿しました。それは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;
}
38
Willem de Wit

私はゲームにかなり遅れていることを実感しますが、これは非常に人気のある質問です、そして私は最近私がここで言及されていなかったアプローチを見つけたので、私はそれを文書化します。

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

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

編集：両方の要素は正しく機能するために同じ幅でなければなりません。

33
BenjaminRH

たとえば、 このリンク とその下のスニペットを参照してください。

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コンテンツはこのようにする必要があります フィドルの例 .

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>

それならフィドルの この例を見てください 。

28
Lalit Kumar

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

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

コンテナ：

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

this Fiddle ！も参照してください。

水平および垂直の両方にセンタリング

私の経験では、ボックスbothを垂直方向と水平方向にセンタリングする最良の方法は、追加のコンテナを使用して、次のプロパティを適用することです。

外側のコンテナ：

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

this Fiddle ！も参照してください。

27
John Slegers

最も簡単な方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

25
joan16v

これが最短の方法で欲しいものです。 

_ 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 % );
}
22
caniz

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

#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プロパティを削除します。

22
Kenneth Palaganas

内容の幅がわからない場合は、次の方法を使用できます 。これら2つの要素があるとします。

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

計算された要素の幅がそれぞれ1000pxと300pxであるとします。次のように進めてください。

  1. .innerの内側に.center-helperをラップする
  2. .center-helperをインラインブロックにします。それは.innerと同じサイズになり、幅300ピクセルになります。
  3. .center-helperをその親に対して50％右にプッシュします。これは500px wrtにその左を配置します。外。
  4. .innerをその親に対して50％左にプッシュします。これにより、左が-150px wrtになります。その左を意味するセンターヘルパーは500 - 150 = 350px wrtです。外。
  5. 水平スクロールバーを防ぐために.outerのoverflowをhiddenに設定します。

デモ：

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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
21
Salman A

テキスト整列：中央

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

#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 はブロック要素のように振る舞い、flexboxモデルに従ってその内容をレイアウトします。これは justify-content: center で動作します。

注意してください。 Flexboxはほとんどのブラウザと互換性がありますが、すべてとは互換性がありません。ブラウザの互換性に関する完全かつ最新のリストについては、 here を参照してください。

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

変換する

transform: translate を使用すると、CSSのビジュアルフォーマットモデルの座標空間を変更できます。それを使用して、要素は平行移動、回転、拡大縮小、および傾斜させることができます。水平方向に中央揃えするには 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> は、 text-align: center の代わりになるHTMLです。古いブラウザやほとんどの新しいブラウザで動作しますが、この機能は 廃止 でありWeb標準から削除されているため、お勧めできません。

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

21
Paolo Forgia

まあ、私はなんとかすべての状況に合うだろうが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);
  })
});
19
Miguel Leite

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

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

あるいは、 w3schools - CSS flex Property をご覧ください。

19
Milan Panigrahi

私が見つけた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 */
}
18
Pnsadeghy

Flexは97％以上のブラウザサポート範囲を持っており、数行以内にこの種の問題を解決するための最良の方法かもしれません。

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

この方法もうまく機能します。

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

内側の<div>の唯一の条件は、そのheightとwidthがそのコンテナのものより大きくてはいけないということです。

18
Billal Begueradj

と遊んでみてください 

margin: 0 auto;

あなたもあなたのテキストを中心に置きたいならば、使ってみてください：

text-align: center;
17
user1817972

誰かがcenterのためのjQueryソリューションを望むならば、これらのdivを合わせてください：

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
17
sarath

flexbox のように単純に使うことができます。

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

すべてのブラウザサポートにオートプレフィックスを適用します。

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

OR ELSE

transform ：を使う

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

autoprefixerを使って：

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
7
Shashin Bhayani

CSS 3：

親コンテナに次のスタイルを使用して、子要素を水平に均等に配置できます。

display: flex;
justify-content: space-between;  // <-- space-between or space-around

justify-contentのさまざまな値についての素敵な DEMO .

Enter image description here

CanIUse： ブラウザ互換性

試してみよう！： 

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

7
Legends

内側のdivにインラインスタイルを適用しました。これを使ってください。 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
7
aamirha
#inner {
    width: 50%;
    margin: 0 auto;
}
6
anand jothi

CSS Flexbox を使用してこれを達成できます。すべてうまくいくためには、親要素に3つのプロパティを適用するだけです。

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

以下のコードを見て、あなたはその性質をもっとよく理解することができます。

CSS Flexboxについての知識を深める

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

6
Saurav Rastogi

line-height + vertical-alignと50%左トリックの使用を混在させて、私が最近見つけた素晴らしいことは、centername__をピュアCSSを使用して水平と垂直の両方で動的サイズのボックスの内側に配置できることです。 

現代のブラウザ+ IE8でテストされたスパン（そしてinline-block）を使わなければならないことに注意してください。 HTML： 

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS： 

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

ここの例を見なさい 。 

6
Josh Mc

#inner divの以下のCSSはどうでしょうか。

#inner {
  width: 50%;
  margin-left: 25%;
}

私は主にdivを中心に置くためにこのCSSを使います。

5
Rajesh

それを簡単に！

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
4
Hassan Siddiqui

Divをdivの中央に配置する

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

3
antelove

広く使用され、多くのブラウザで動作する最もよく知られている方法は、古いものを含めて、以下のようにmarginを使用することです：

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

コードを実行して動作を確認します。また、この方法でセンタリングしようとすると、CSSで忘れてはならない2つの重要なことがあります。margin: 0 auto;width子の場合、期待どおりに中央に配置されません！

3
Alireza

私はただ最も単純な解決策を使用しますが、それはすべてのブラウザで動作します。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
3
Gerald Goshorn

つかいます：

<div id="parent">
  <div class="child"></div>
</div>

スタイル：

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

あなたがそれを水平に中央に置きたいなら、あなたは以下のように書くべきです：

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

最近ではフレックスボックスを使用して購入することができます。 flex-boxを使用するには、display: flex;とalign-items: center;を親または#outer div要素に指定する必要があります。コードは次のようになります。

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

これは、子または#inner divを水平方向に中央に配置する必要があります。しかし、実際に変更を確認することはできません。 #outer divには高さがないため、つまり高さがautoに設定されているため、すべての子要素と同じ高さになります。そのため、少し視覚的なスタイリングを行った後、結果コードは次のようになります。

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

#inner divが中央に配置されていることがわかります。 Flex-boxは、CSSを使用して要素を水平または垂直スタックに配置する新しい方法であり、グローバルブラウザーの互換性の96％を持っています。したがって、自由に使用できます。Flex-boxへのアクセスについて詳しく知りたい場合は、 CSS-Tricks の記事を参照してください。Flex-boxを使用して学ぶのに最適な場所です。

3
Morteza Sadri

CSS 3 flexbox を使えば可能です。フレックスボックスを使用する場合、2つの方法があります。

  1. 親のdisplay:flex;を設定し、親の要素にプロパティ{justify-content:center; ,align-items:center;}を追加します。

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. 親のdisplay:flexを設定し、margin:auto;を子に追加します。

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

3
Dream Hunter

このように、絶対位置を使用して水平方向と垂直方向に中央揃えすることもできます。

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3
Agu Dondo

あなたはflexboxを使うことができます。

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

あなたはこのリンクでそれについてもっと学ぶことができます： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ /

3
Cyan Baltazar

私は、calcメソッドについて言及した人が誰もいないことに気づいたので、これに答えたかったのです。使い方は中心にあるdivのためです、あなたがその幅を知っているならば、それが1200ピクセルだとしましょう、そして行ってください

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

そのため、基本的に50％マイナス既知の幅の半分の左マージンが追加されます。

2
serdarsenay

FLEXBOXを使用して、これを簡単に実現できます。

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

Divを水平にdivの中央に配置します。

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

enter image description here

Div内のdivを垂直方向に中央に配置します。

#outer { 
  display: flex;
  align-items: center;
    }

enter image description here

そして、divを垂直および水平に完全に中央化するには：

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

enter image description here

それがあなたの一部に役立つことを願っています。ハッピーコーディング！

2
Appy Sharma
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
2
pavelbere

2019年現在、この質問はまだ多くのヒットを得ているので、水平方向の中心に対する非常に単純でクロスブラウザの答えは、この規則を親要素に適用することです。

.parentBox {
 display: flex;
 justify-content: center
}
2
Ady Ngom

これは、 flexbox を使用して、内側のコンテナに幅を指定せずに水平方向に中央揃えする方法です。そのアイデアは、内側のコンテンツを左右からプッシュする疑似要素を使用することです。

擬似要素にflex:1を使用すると、残りのスペースを埋めて同じサイズになり、内側のコンテナは中央に配置されます。

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

縦方向の配置についても、単にフレックスの方向を列に変更することで、同じ状況を考えることができます。

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

2
Temani Afif

これはあなたの内側のdivを水平方向と垂直方向に集中させる：

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

水平位置合わせのみの場合は、

margin: 0 auto;

そして垂直の場合は、変更

margin: auto 0;
1
Shivam Chhetri

_ css _ 

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

_ html _ 

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

すべての答えを読んだ後、私は私が好むものを見ませんでした。これは、ある要素を別の要素の中央に配置する方法です。 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/ 

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
1
Mardok

このコードを追加することができます：

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Rafiqul Islam

状況に応じて、最も簡単な解決策は次のとおりです。

margin:0 auto; float:none;
1
Justin Munce

最も簡単な回答add margin：auto; 内側に。

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

cSSコード

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

私のcodepenリンクをチェックしてください http://codepen.io/feizel/pen/QdJJrK

enter image description here

1
Faizal Munna

内側のwidthにdivを渡し、CSSプロパティにmargin:0 auto;を追加します。

1
Mr.Pandya

つかいます：

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

はい、これは水平方向の整列のための短くてきれいなコードです。私はあなたがこのコードが好きだと思います。

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
1
Banti Mathur

以下のコードを使用してください。

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
1
Faizal

このコードを使用してください：

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
1
Husain Ahmed

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

1
Qmr

とても簡単です。

内側のdivに与える幅を決めて、次のCSSを使うだけです。

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
1
Gaurav Aggarwal

これは確かにあなたの#innerを水平にも垂直にも中央に寄せます。これはすべてのブラウザでも互換性があります。中心に配置する方法を示すために、スタイルを追加しました。

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

しかし、もしあなたがそれを水平に並べたいだけなら、これはあなたを助けるかもしれません。

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Mark Salvania

text-align:centerという1行のコードを使用できます。

これが例です：

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

1
Yahya Essam

あなたがそれをすることができる最も簡単な方法の一つはdisplay: flexを使うことです。外側のdivは表示を柔軟にするだけでよく、内側のdivは水平方向の中央に配置するためにmargin: 0 autoが必要です。

垂直方向に中央揃えし、別のdivの中央にdivを配置するには、以下の.innerクラスのコメントをご覧ください。

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

1
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
1
Majid Sadr

最も簡単な方法の1つ

<!DOCTYPE html> 
<html>
 <head>
    <style>
        #outer-div {
        width: 100%; 
        text-align: center;
        background-color: #000 
        }
        #inner-div {
        display: inline-block; 
        margin: 0 auto;
        padding: 3px;
        background-color: #888
        }
    </style>
 </head>
 <body>
    <div id ="outer-div" width="100%">
        <div id ="inner-div"> I am a easy horizontally centered div.</div>
    <div>
 </body>
</html>
1
Asmit

すみませんが、1990年代のこの赤ん坊は私のために働きました

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

私はこの罪のために地獄に行きますか？

1
Heitor

私が私の様々なプロジェクトで使った中で最高のものは 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

フィドルリンク

1
Jaison

次のCSSのクラスを使用して、親に対して任意の要素を垂直方向および水平方向に中央揃えできます。

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
Elias MP

HTML：

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

CSS：

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle 。

0
Fahad Uddin

最善の方法は、表示テーブル（外側）を持つdivの直後に来るテーブルセル表示（内側）を使用し、内側のdiv（垂直表示付き）と内側のdiv内で使用するすべてのタグを垂直に配置するdivまたはpageの中央にあります。

注：指定した高さを外側に設定する必要があります

これは相対的な位置も絶対的な位置もなしに知っている最善の方法であり、すべてのブラウザで同じように使用できます。

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

0
hossein ghaem

複数のラッパーや自動マージンの代わりに、この簡単な解決策が私のために働きます：

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Divをビューの中央（垂直および水平）に配置し、サイズを調整してサイズを調整し、背景画像（垂直および水平）を中央揃え、テキストを水平（中央）に配置し、divをビュー内およびコンテンツの上に配置します。単にHTMLのbodyに入れてお楽しみください。

0
Cees Timmerman

これを試してみてください。

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
0
Ajay Gupta

これは私のために働いた：

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

このコードでは、要素の幅を決めます。

0
Fatemeh Khosravi Farsani

私はmargin-leftと似ていますが、leftでも構いません。

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
0
iorgu

同じサイズの#innerを持つ別のdivを追加し、-50％（#innerの幅の半分）および#innerを50％だけ左に移動できます。私の英語でごめんなさい

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

#inner > div {
  position: relative;
        left: -50%;
  }
<div id="outer">  
  <div id="inner"><div>Foo foo</div></div>
</div>
0
user204580

あなたの内側のdivにCSSを追加してください。 margin: 0 autoを設定し、その幅を外側のdivの幅である100％未満に設定します。

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

これで望ましい結果が得られます。

0
Joseph

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

0
Anu

私はこの質問に答えるのが少し遅れているのを知っています、そして、私はこれをすべての答えを読むのを煩わさなかったので、この may は重複しています。 これが私の考えです ：

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
0
uSeRnAmEhAhAhAhAhA
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan

単にMargin:0px auto：

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

0
Sankar

親divにtext-align:center;を追加する  

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

または 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/ /

0
Friend

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

Divをセンタリングする主な属性は、要件に応じてmargin: autoとwidth:です。

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

あなたがdivの静的な方法を使用している場合は通常のもののために

divがその親に対して絶対であるときにdivを中央に配置したい場合は、次のようになります。

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}
0
Mohammed Rabiulla RABI

別の方法でそれをすることができます。以下の例を参照してください。

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
0
Gaurang Sondagar

これを試して：

<div id="a">
    <div id="b"></div>
</div>

CSS：

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
0
hossein ketabi

まず第一に：あなたは第二divに幅を与える必要があります：

例えば：

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS：

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

幅を指定しないと、線の幅全体になります。

0
user3968801