回答:
このtext-alignプロパティはインライン要素でimgはなくブロックコンテナーに適用され、インライン要素であるため機能しません。W3C仕様を参照してください。
代わりにこれを使用してください：
img.center {
display: block;
margin: 0 auto;
}<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>text-alignそれらでも同様に動作します。
これは常に機能するとは限りません...機能しない場合は、以下を試してください。
img {
display: block;
margin: 0 auto;
}私はこの投稿に出くわしました、そしてそれは私のために働きました：
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<div style="border: 1px solid black; position:relative; min-height: 200px">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>（縦横合わせ）
それを行う別の方法は、囲んでいる段落を中央揃えにすることです。
<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>text-align: centerが画像を中央に配置するための適切な方法であるかどうかを尋ね、プロパティがimgタグの一部である必要があることを指定しませんでした。この回答では、問題のプロパティを使用して、ソリューションを提供します（機能します）。
できるよ：
<center><img src="..." /></center>
<center>html5ではサポートされていませんが、いまいましい動作します。
実際、コードの唯一の問題は、text-align属性がタグ内のテキスト（はい、画像はテキストとしてカウントされます）に適用されることです。次のspanように、画像をタグで囲み、スタイルをに設定しますtext-align: center。
span.centerImage {
text-align: center;
}<span class="centerImage"><img src="http://placehold.it/60/60" /></span>画像が中央に配置されます。質問への回答として、画像を含むspan（またはdiv）にルールを適用することを覚えている限り、画像を中央に配置するのが最も簡単で確実な方法です。
span要素がありdisplay: inline;、この実行ので、置くことと同じ問題に、デフォルトでtext-align: center;上imgそのもの。これを機能させるには、spanをに設定するdisplay: block;か、で置き換える必要がありdivます。
提案できる要素を中央に配置する方法は3つあります。
text-alignプロパティを使用する
.parent {
text-align: center;
} <div class="parent">
<img src="https://placehold.it/60/60" />
</div>marginプロパティを使用する
positionプロパティを使用する
img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}<div class="parent">
<img src="https://placehold.it/60/60" />
</div>最初と2番目の方法は、親が少なくとも画像と同じ幅である場合にのみ機能します。画像が親より広い場合、画像は中央に配置されません!!!
しかし：3番目の方法はそのための良い方法です！
次に例を示します。
img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}<div class="parent">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>img、正当化さdivれた内部を中央に配置できましたWebView。ありがとうございました！
Internet Explorerの古いバージョンをサポートする必要がある場合のみ。
最近のアプローチはmargin: 0 auto、CSSで行うことです。
ここに例：http : //jsfiddle.net/bKRMY/
HTML：
<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>CSS：
p.pic {
width: 48px;
margin: 0 auto;
}ここでの唯一の問題は、段落の幅が画像の幅と同じでなければならないことです。段落に幅を入れないと、100％と見なされて画像が左揃えになるため、もちろん使用しない限り、幅は機能しませんtext-align:center。
フィドルを試してみて、必要に応じて試してみてください。
img{
display: block;
margin-right: auto;
margin-left: auto;
}画像を保持するコンテナでは、CSS 3 Flexboxを使用して、垂直方向と水平方向の両方で画像を完全に中央に配置できます。
イメージホルダーとして<div class = "container">があるとします。
次に、CSSとして使用する必要があります。
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}これにより、このdiv内のすべてのコンテンツが完全に中央揃えになります。
私が見つけた最も簡単な解決策は、これを私のimg要素に追加することでした：
style="display:block;margin:auto;"他の人が示唆するように、「自動」の前に「0」を追加する必要がないようです。多分それは正しい方法かもしれませんが、「0」なしでも私の目的には十分機能します。少なくとも最新のFirefox、Chrome、およびEdge。
auto auto auto autoと0 auto手段0 auto 0 auto...と下部と上部の余白のデフォルト自動ではされる0ので、0を追加するかどうかを正確にあなたは番目の-重複するものの、すでに提供お答えします。この場合も同様である
auto、auto auto、auto auto auto、auto auto auto auto、0 auto 0、0 auto、0 auto 0 auto、のように...あなたそれぞれが異なった答えに値すると思いますか？私はそうは思いません。
i++と同じですi+=1）
text-align: center親で使用して、imgをdisplay: inline-block→に変更できます。したがって、テキスト要素のように動作し、親に幅がある場合は中央に配置されます。
img {
display: inline-block
}背景以外の画像を中央に配置するかどうかは、画像をインライン（デフォルトの動作）として表示するか、ブロック要素として表示するかによって異なります。
インラインの場合
画像の表示CSSプロパティのデフォルトの動作を維持する場合は、設定する必要がある別のブロック要素内に画像をラップする必要があります text-align: center;
ブロックの場合
画像をそれ自体のブロック要素と見なしたい場合、text-alignプロパティは意味をなさないので、代わりにこれを行う必要があります。
IMG.display {
display: block;
margin-left: auto;
margin-right: auto;
}あなたの質問への答え：
プロパティはtext-align：centerです。CSSを使用して画像を中央に配置する良い方法ですか？
はいといいえ。
text-alignプロパティを継承するため、画像のラッパー内に他の要素がある場合：この副作用は気に入らない可能性があります。参考文献
display: blockmargin: 0私のために動作しませんでした、どちらラッピングtext-align: center要素。
これは私の解決策です：
img.center {
position: absolute;
transform: translateX(-50%);
left: 50%;
}margin: 0 auto;？キーが設定されているmargin-leftとmargin-rightしますauto。margin: 0 auto;そのためのショートカットです。
margin: 0 auto、margin: 0とmargin: auto、どれも働きました。Chromeのインスペクタでは、を使用するmargin: 0 autoと、感嘆符がinvalid property value（またはそれを意味するものは何でも）言ってプロパティをストライクすることに注意してください
relativeではなくポジショニングを使用したい場合がありますがabsolute、どちらもかなりうまく機能します。
内に画像とテキストがあるdiv場合text-align:center、テキストと画像を一気に揃えるために使用できることを発見しました。
HTML：
<div class="picture-group">
<h2 class="picture-title">Picture #1</h2>
<img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
<p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
</div>CSS：
.picture-group {
border: 1px solid black;
width: 25%;
float: left;
height: 300px;
#overflow:scroll;
padding: 5px;
text-align:center;
}CodePen： https ://codepen.io/artforlife/pen/MoBzrL?editors=1100