Porque não consigo centralizar imagem usando ‘text-align:center’? [duplicada] – html5 css3

Segue o código abaixo:

HTML

<div class="panel panel-default" style="height:400px">
  <div class="panel-body">
    <div class="form-group">
      <div class="col-xs-6">
      </div>
    </div>
    <img id="image" width="300" src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg">
  </div>
</div>

CSS

    #image {
    text-align:center;
}

Aqui está um exemplo em jsfiddle

Com comando <center></center> funciona, mais muita gente não recomenda.

O problema é que você está tentando centralizar o conteúdo da imagem. Para funcionar o text-align:center, ele teria que ser aplicado na div onde a imagem se encontra. Mas também nao é o caminho.

O melhor é definir a imagem com display:block e colocar margem automática:

#image {
  display:block;
  margin:0 auto;
}

<div class="panel panel-default" style="height:400px">
  <div class="panel-body">
    <div class="form-group">
      <div class="col-xs-6">
      </div>
    </div>
    <img id="image" width="300" src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg">
  </div>
</div>

(apesar do senso comum, a imagem é normalmente implementada como inline-block e não como block)

Você precisa aplicar o text-align na div panel-body e não na imagem.