4787

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

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

125 に答える 125

5252

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

編集

flexboxdivを水平方向と垂直方向の中央にスタイリングするのは非常に簡単です。

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

于 2008-09-22T12:29:07.710 に答える
1351

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

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

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

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

于 2011-01-20T22:55:26.767 に答える
426

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

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

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

于 2012-08-30T12:05:25.450 に答える
281 

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}
<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

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

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

CSS calc()を使用すると、コードはさらに単純になります。


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

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

于 2011-12-01T19:52:29.317 に答える
161

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

以下を使用できます。

#element {
    display: table;
    margin: 0 auto;
}
于 2012-05-12T23:45:31.703 に答える
136

高さと幅が不明な div をセンタリングする

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

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

CodepenまたはJSBinでさらにいじってください。

于 2014-05-17T18:38:48.260 に答える
113

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

于 2009-07-24T22:00:04.437 に答える
108

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

于 2008-09-22T12:30:08.253 に答える
102

CSS 3 の box-align プロパティ

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
于 2012-03-11T13:37:51.707 に答える
78

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

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

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

于 2011-06-23T21:42:53.133 に答える
78

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

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

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

于 2013-04-07T08:22:07.357 に答える
69

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 モードではレガシー ブラウザーをサポートするために必要です。

于 2012-05-31T15:32:44.763 に答える
61

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

詳細については、Mozilla Developer Networkを参照してください。

于 2015-03-12T14:01:38.540 に答える
56

ブログで「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;
}
于 2013-10-25T11:53:59.677 に答える
52

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

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

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

正しく機能するには、両方の要素が同じ幅である必要があります。

于 2013-05-27T16:12:43.473 に答える
45

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

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>

次に、 fiddle でこの例を参照してください。

于 2013-12-04T07:30:31.860 に答える
40

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

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

コンテナ:

  • すべきだった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>

この Fiddleも参照してください。

水平方向と垂直方向の両方のセンタリング

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

外箱：

  • すべきだった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>

この Fiddleも参照してください。

于 2016-02-19T16:57:54.530 に答える
36

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

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

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

于 2016-09-23T06:49:46.857 に答える
35

最も簡単な方法:

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

于 2014-08-22T12:10:48.360 に答える
33

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

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

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

  1. .inner中に包み込む.center-helper
  2. インライン.center-helperブロックを作成します。.inner幅300ピクセルにしたのと同じサイズになります。
  3. .center-helper親に対して 50% 右に押します。これにより、左側が 500 ピクセル wrt に配置されます。外側。
  4. .inner親に対して 50% 左に押します。これにより、左側が -150 ピクセル wrt に配置されます。左が 500 - 150 = 350 ピクセル wrt であることを意味する中央のヘルパー。外側。
  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>

于 2014-01-17T18:18:26.417 に答える
30

このようなことができます

#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プロパティを削除してください。

于 2013-10-14T12:09:57.280 に答える
28

これがあなたが最短の方法で望むものです。

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 % );
}
于 2014-01-28T09:55:54.967 に答える
24

さて、私はおそらくすべての状況に適合する解決策を見つけることができましたが、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);
  })
});
于 2014-02-11T15:51:03.233 に答える
19

中央揃えの 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;");
});
于 2014-09-20T07:22:04.833 に答える
19

次のように単純にFlexboxを使用できます。

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

すべてのブラウザー サポートに Autoprefixer を適用します。

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

またはそうでなければ

変換を使用します:

#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%)
}
于 2019-04-04T11:59:58.177 に答える
18

で遊んでみてください

margin: 0 auto;

テキストも中央揃えにしたい場合は、次を使用してみてください。

text-align: center;
于 2013-11-05T15:21:21.100 に答える
17

この CSS コンテンツを CSS ファイルに追加するだけです。コンテンツを自動的に中央揃えにします。

CSS で中央に水平に配置します。

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

CSS で垂直方向と水平方向を中央に揃える:

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
于 2020-01-06T06:44:18.760 に答える
11

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

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
于 2013-06-06T05:30:29.967 に答える
10

グリッドあり

非常にシンプルでモダンな方法は、次を使用することdisplay: gridです。

div {
    border: 1px dotted grey;
}

#outer {
    display: grid;
    place-items: center;
    height: 50px; /* not necessary */
}
<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div id="outer">
            <div>Foo foo</div>
        </div>
    </body>
</html>

于 2020-07-27T21:10:48.597 に答える
9

line-height+の使用vertical-alignと50%左のトリックを組み合わせて、center純粋な CSS を使用して、水平方向と垂直方向の両方で、動的にサイズ変更された別のボックス内に動的にサイズ変更されたボックスを作成することができます。

inline-block最新のブラウザー + Internet Explorer 8 でテストされた スパン (および ) を使用する必要があることに注意してください。 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;
}

ここで例を参照してください。

于 2013-10-31T19:56:49.160 に答える
9

CSS3:

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

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

のさまざまな値に関する素晴らしいデモjustify-contentです。

ここに画像の説明を入力してください

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>

于 2017-03-11T14:14:33.377 に答える
8

#innerdivには以下の CSS コンテンツを使用します。

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

私は主にこの CSS コンテンツを中央のdivに使用します。

于 2013-10-01T18:14:09.197 に答える
8

CSS 3 Flexboxを使用して可能です。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>

于 2017-01-13T12:13:54.890 に答える
6

これは <div> を水平方向に中央揃えにする最良の例です

#outer {
    display: flex;
    align-items: center;
    justify-content: center;
}
<!DOCTYPE html>
<html>
    <head>

    </head>

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

于 2019-11-23T10:54:34.220 に答える
4

CSS Flexboxを使用できます。

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

詳細については、次のリンクを参照してください: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2016-12-20T08:22:40.503 に答える
4

FlexboxまたはCSS グリッドを使用しました

  1. フレックスボックス

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

  2. CSS グリッド

    #outer {
    display: inline-grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 3px;
}

この問題はさまざまな方法で解決できます。

于 2020-02-19T13:12:16.207 に答える
4

これは、多くのメソッドを使用して実行できます。多くの人/ギャルから与えられた答えは正しく、適切に機能しています。別のパターンをもう 1 つ紹介します。

HTMLファイル内

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

CSSファイル内

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}
于 2021-05-04T18:11:04.033 に答える
4

最近では優れた手法であるFlexboxを使用してそれを行うことができます。

Flexbox を使用するには、親要素またはdiv 要素にdisplay: flex;andを指定する必要があります。コードは次のようになります。align-items: center;#outer

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

これにより、子または#innerdiv が水平方向に中央揃えになります。しかし、実際には何の変化も見られません。div には高さがありません。#outerつまり、その高さは 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>

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

于 2018-09-10T23:06:24.317 に答える
4 

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

于 2019-03-07T14:10:28.250 に答える
4

ある高さの親がある場合、body{height: 200px} または以下のように高さ 200px の親 div#outer がある場合、以下のように CSS コンテンツを追加します。

HTML:

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

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

次に、div#centered コンテンツなどの子コンテンツは、位置 CSS を使用せずに垂直方向または水平方向の中央になります。垂直方向の中間の動作を削除するには、CSS コードの下に変更するだけです。

#centered {
  margin: 0px auto;
}

また

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

デモ: https://jsfiddle.net/jinny/p3x5jb81/5/

デフォルトで内側の div が 100% ではないことを示す境界線のみを追加するには、次のようにします。

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #000000;
}
#centered {
  margin: auto;
  border: 1px solid #000000;
}
<div id="outer">
  <div id="centered">Foo foo</div>
</div>

デモ: http://jsfiddle.net/jinny/p3x5jb81/9

于 2019-12-10T09:07:51.023 に答える
4

これを行うだけです：

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

CSS

#outer{
  display: grid;
  place-items: center;
}
于 2021-04-12T06:21:17.537 に答える
3

以下の CSS コードを試してください。

<style>
    #outer {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        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;
    }
</style>

以下の HTML コードを使用して上記の CSS を適用し、水平方向の中央に配置し、垂直方向の中央に配置します (別名: 垂直方向に中央に揃えます) 。

<div id="outer">
    <div id="inner">
    ...These <div>ITEMS</div> <img src="URL"/> are in center...
    </div>
</div>

CSS を適用して上記の HTML を使用すると、Web ページのそのセクションは次のようになります。

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃V..Middle & H..Center        ┣━1
┃                             ┣━2
┃                             ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
 1      2      3      4      5

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                             ┣━1
┃    V..Middle & H..Center    ┣━2
┃                             ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
 1      2      3      4      5

「外側」ラッパーの内側で「内側」要素を水平方向に中央に配置するには、「内側」要素 (DIV、IMG などの型) に次のような「インライン」CSS プロパティが必要です: display:inline または display:inline-blockなど、THEN "outer" CSS プロパティ text-align:center は "inner" 要素で機能します。

したがって、最小限の CSS コードに近いものは次のとおりです。

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

    #outer > .inner2 {
        display: inline-block;
    }
</style>

以下の HTML コードを介して上記の CSS を中央 (水平) に適用します。

<div id="outer">
    <img class="inner2" src="URL-1"> <img class="inner2" src="URL-2">
</div>

CSS を適用して上記の HTML を使用すると、Web ページのその行は次のようになります。

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━━━┑                     ┃
┃│ img URL1 │                     ┃
┃┕━━━━━━━━━━┙                     ┃
┃┍━━━━━━━━━━┑                     ┃
┃│ img URL2 │                     ┃
┃┕━━━━━━━━━━┙                     ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃    ┍━━━━━━━━━━┑ ┍━━━━━━━━━━┑    ┣━1
┃    │ img URL1 │ │ img URL2 │    ┣━2
┃    ┕━━━━━━━━━━┙ ┕━━━━━━━━━━┙    ┣━3
┗┳━━━━━━━┳━━━━━━━┳━━━━━━━┳━━━━━━━┳┛
 1       2       3       4       5

「内部」要素ごとに毎回 class="inner2" 属性を指定することを避けたい場合は、早い段階でそのような CSS を使用します。 
<style>
    #outer {
        width: 100%;
        text-align: center;
    }

    #outer > img, #outer > div {
        display: inline-block;
    }
</style>

したがって、上記の CSS を以下のように適用して、アイテムを「外側」ラッパー内で (水平方向に) 中央揃えにすることができます。

<div id="outer">
    <img src="URL-1"> Text1 <img src="URL-2"> Text2
</div>

CSS を適用して上記の HTML を使用すると、Web ページのその行は次のようになります。

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━┑                ┃
┃│img URL1│                ┃
┃┕━━━━━━━━┙                ┃
┃Text1                     ┃
┃┍━━━━━━━━┑                ┃
┃│img URL2│                ┃
┃┕━━━━━━━━┙                ┃
┃Text2                     ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃   ┍━━━━━━━━━┑     ┍━━━━━━━━┑        ┣━1
┃   │img URL1 │     │img URL2│        ┣━2
┃   ┕━━━━━━━━━┙Text1┕━━━━━━━━┙Text2   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

「id」属性の一意の名前/値は、1 つの Web ページの 1 つの HTML 要素に対して 1 回だけ使用する必要があります。そのため、同じ「id」名の CSS プロパティを複数の HTML 要素で繰り返し使用することはできません (一部の Web ブラウザでは、複数の要素で同じ ID)。
したがって、同じ Web ページに多くの行が必要で、その行の中央 (水平方向) に内部要素/アイテムを表示する必要がある場合は、そのような CSS「クラス」(別名: CSS グループ、CSS リピーター) を使用できます。 
<style>
    .outer2 {
        width: 100%;
        text-align: center;
    }

    .outer2 > div, .outer2 > div > img {
        display: inline-block;
    }
</style>

したがって、上記の CSS を以下のように適用して、"outer2" ラッパー内のアイテムを (水平方向に) 中央揃えにすることができます。

<div class="outer2">
    <div>
        Line1: <img src="URL-1"> Text1 <img src="URL-2">
    </div>
</div>
...
<div class="outer2">
    <div>
        Line2: <img src="URL-3"> Text2 <img src="URL-4">
    </div>
</div>

CSS を適用して上記の HTML を使用すると、Web ページのこれらの行は次のようになります。

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL1│            ┃
┃┕━━━━━━━━┙            ┃
┃Text1                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL2│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL3│            ┃
┃┕━━━━━━━━┙            ┃
┃Text2                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL4│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃         │img URL1│     │img URL2│   ┣━2
┃   Line1:┕━━━━━━━━┙Text1┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃         │img URL3│     │img URL4│   ┣━2
┃   Line2:┕━━━━━━━━┙Text2┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5

中央に垂直に配置するには、以下の CSS コードを使用する必要があります。 
<style>
    .outer2 {
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }

    .outer2 > div, .outer2 > div > img {
        display: inline-block;
        vertical-align: middle;
    }
</style>

したがって、上記の CSS を以下のように適用して、アイテムを水平方向に中央揃えし、「outer2」ラッパーの中央に垂直方向に揃えることができます。

<div class="outer2">
    <div>
        Line1: <img src="URL-1"> Text1 <img src="URL-2">
    </div>
</div>
...
<div class="outer2">
    <div>
        Line2: <img src="URL-3"> Text2 <img src="URL-4">
    </div>
</div>

CSS を適用して上記の HTML を使用すると、Web ページのこれらの行は次のようになります。

BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL1│            ┃
┃┕━━━━━━━━┙            ┃
┃Text1                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL2│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2:                ┃
┃┍━━━━━━━━┑            ┃
┃│img URL3│            ┃
┃┕━━━━━━━━┙            ┃
┃Text2                 ┃
┃┍━━━━━━━━┑            ┃
┃│img URL4│            ┃
┃┕━━━━━━━━┙            ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛

AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃   Line1:│img URL1│Text1│img URL2│   ┣━2
┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1
┃   Line2:│img URL3│Text2│img URL4│   ┣━2
┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
 1        2        3        4        5
于 2015-09-01T10:13:16.137 に答える
2

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

margin: 0 auto; float: none;
于 2015-12-20T21:45:58.430 に答える
2

はい、これは水平方向の整列のための短くてきれいなコードです。

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
于 2015-12-23T09:39:26.890 に答える
2

とてもシンプルです。

内側の div に与える幅を決定し、次の CSS を使用するだけです。

CSS

.inner{
  width: 500px; /* Assumed width */
  margin: 0 auto;
}
于 2016-03-28T09:45:42.190 に答える
2

width内側にいくつか与えて、CSS プロパティにdiv追加します。margin:0 auto;

于 2016-11-08T06:04:37.950 に答える
2 
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}
于 2015-11-14T12:08:48.273 に答える
2

これを試して：

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Foo foo</div></div>
于 2020-09-22T18:08:56.827 に答える
1

複数のラッパーや自動マージンの代わりに、この単純なソリューションが機能します。

<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でお楽しみいただけます。

于 2015-01-15T14:31:34.443 に答える
1

最善の方法は、表示テーブル (外側) を持つ div の直後にあるテーブルセル表示 (内側) を使用し、内側の div (テーブルセル表示) と配置された内側の div で使用するすべてのタグに垂直方向の位置合わせを設定することですdiv またはページの中央。

注：指定された高さをouterに設定する必要があります

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

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

于 2016-02-12T08:15:29.567 に答える
1

text-align:center;親divに追加 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

また

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

https://jsfiddle.net/f8su1fLz/

于 2016-07-30T11:38:24.820 に答える
1

これを試して：

<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;
}
于 2014-08-13T13:20:22.447 に答える
0

justify-content: center;コンテナがフレックスとして表示されているときに使用することをお勧めします。text-align: center;テキスト要素に関する場合。

以下のコードを確認し、要件に従って変更してください。

#content_block {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
  text-align: center;
}

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

于 2021-10-30T09:07:31.893 に答える
0 
#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}
于 2022-01-20T11:43:37.717 に答える
0

Flexbox の水平方向および垂直方向の中央揃え要素の中央揃え

.wrapper {border: 1px solid #678596; max-width: 350px; margin: 30px auto;} 
      
.parentClass { display: flex; justify-content: center; align-items: center; height: 300px;}
      
.parentClass div {margin: 5px; background: #678596; width: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}
<h1>Flexbox Center Horizontally and Vertically Center Align an Element</h1>
<h2>justify-content: center; align-items: center;</h2>

<div class="wrapper">

<div class="parentClass">
  <div>c</div>
</div>

</div>

于 2021-01-20T06:29:55.763 に答える
-4 
.outer {
    text-align: center;
    width: 100%
}
于 2016-12-09T11:13:58.110 に答える
-12

センタリング: 自動幅マージン

このボックスは、左右の余白幅を「自動」に設定することにより、水平方向に中央に配置されます。これは、CSS で水平方向のセンタリングを実現するための推奨される方法であり、CSS 2 をサポートするほとんどのブラウザーで非常にうまく機能します。残念ながら、Internet Explorer 5/Windows はこの方法に対応していません。技術ではなく、ブラウザの欠点です。

簡単な回避策があります。（その言葉によって引き起こされた吐き気を抑える間、一時停止します。） 準備はできましたか？Internet Explorer 5/Windows は、CSS の "text-align" 属性をブロック レベルの要素に誤って適用します。ブロック レベル要素 (多くの場合 BODY 要素) に対して "text-align:center" を宣言すると、Internet Explorer 5/Windows でボックスが水平方向に中央揃えになります。

この回避策には副作用があります。CSS の「text-align」属性が継承され、インライン コンテンツが中央に配置されます。Internet Explorer 5/Windows の回避策の影響を打ち消すために、中央のボックスに "text-align" 属性を明示的に設定する必要があることがよくあります。関連する CSS は次のとおりです。

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}

http://bluerobot.com/web/css/center1.html

于 2013-03-14T15:00:00.553 に答える