title: Which is the correct way to horizontally center this Bootstrap form in MVC?
body: <p>When I want to center a div inside another div, I usually re-read <a href="https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div">this post</a>. It usually works. But now it doesn't and I am a million years away to be an expert in CSS. </p>
  
  <p>Here is how my form is constructed:</p>
  
  <pre><code>&lt;h2 class="no-margin-top"&gt;Revisiones Administrativas&lt;/h2&gt;
  
    @using (Html.BeginForm())
      {
          @Html.AntiForgeryToken()
  
          &lt;div class="form-horizontal"&gt;
              &lt;hr /&gt;
              @Html.ValidationSummary(true, "", new { @class = "text-danger" })
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.TipoVisitante, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      &lt;select name="TipoVisitante" id="TipoVisitante" class="form-control"&gt;
                          @foreach (var item in Model.TiposVisitante)
                          {
  
                              &lt;option value="@item.Descripcion"&gt;
                                  @item.Descripcion
                              &lt;/option&gt;
                          }
                      &lt;/select&gt;
                      @Html.ValidationMessageFor(model =&gt; model.TipoVisitante, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.MotivoVisita, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      &lt;select name="MotivoVisita" id="MotivoVisita" class="form-control"&gt;
                          @foreach (var item in Model.MotivosVisita)
                          {
  
                              &lt;option value="@item.MotivoVisita"&gt;
                                  @item.MotivoVisita
                              &lt;/option&gt;
                          }
                      &lt;/select&gt;
                      @Html.ValidationMessageFor(model =&gt; model.TipoVisitante, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Hallazgo, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      &lt;select name="Hallazgo" id="Hallazgo" class="form-control"&gt;
                          @foreach (var item in Model.Hallazgos)
                          {
  
                              &lt;option value="@item.Hallazgo"&gt;
                                  @item.Hallazgo
                              &lt;/option&gt;
                          }
                      &lt;/select&gt;
                      @Html.ValidationMessageFor(model =&gt; model.TipoVisitante, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.FechaVisita, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.FechaVisita, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.FechaVisita, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Visitante, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Visitante, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Visitante, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.DireccionFisica, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      &lt;textarea class="form-control width-100" id="DireccionFisica" name="DireccionFisica"&gt;&lt;/textarea&gt;
                      @Html.ValidationMessageFor(model =&gt; model.DireccionFisica, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.UsoNoAutorizadoDesde, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.UsoNoAutorizadoDesde, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.UsoNoAutorizadoDesde, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.UsoNoAutorizadoHasta, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.UsoNoAutorizadoHasta, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.UsoNoAutorizadoHasta, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.DirectorAuxiliar, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.DirectorAuxiliar, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.DirectorAuxiliar, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.FechaRevisionCargos, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.FechaRevisionCargos, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.FechaRevisionCargos, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Cliente, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Cliente, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.RepresentanteRevision, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.RepresentanteRevision, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.RepresentanteRevision, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-offset-2 col-md-10"&gt;
                      &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      }
  </code></pre>
  
  <p>NOTE: My layout page doesn't have any other divs. I deleted them. This piece of code is rendered alone between the HTML body tags.</p>
  
  <p>Can anyone help?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>As requested by one member, here is a shorter snippet of the rendered HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding-top: 50px;
      padding-bottom: 20px;
  }
  
  /* Set padding to keep content from hitting the edges */
  .body-content {
      padding-left: 15px;
      padding-right: 15px;
  }
  
  /* Override the default bootstrap behavior where horizontal description lists 
     will truncate terms that are too long to fit in the left column 
  */
  .dl-horizontal dt {
      white-space: normal;
  }
  
  /* Set width on the form input elements since they're 100% wide by default */
  input,
  select,
  textarea {
      max-width: 280px;
  }
  
  .index-parent-div{
      position: absolute;
      top: 50%;
      margin-top: -200px; /* half of #content height*/
      left: 0;
      width: 100%;
  }
  
  .index-inner-div {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      height: 395px;
  }
  
  .width-100{
      width: 100%;
  }
  
  .no-margin-top{
      margin-top: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;body&gt;
          &lt;h2 class="no-margin-top"&gt;Revisiones Administrativas&lt;/h2&gt;
  
  &lt;form action="/" method="post"&gt;&lt;input name="__RequestVerificationToken" type="hidden" value="uNfiMxTWxX4Cz4baOODnVnwAJRNdAtr9KxcPyrJgOneJyn-xgfjybke088Ya3r39SMxLnEApagu_BKZv2wbnVc3ifIPrDrTZeGrv_EBojas1" /&gt;            &lt;div class="form-horizontal"&gt;
                  &lt;hr /&gt;
                  
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-md-2" for="TipoVisitante"&gt;Tipo de Visitante: &lt;/label&gt;
                      &lt;div class="col-md-10"&gt;
                          &lt;select name="TipoVisitante" id="TipoVisitante" class="form-control"&gt;
                                  &lt;option value="Descripci&amp;#243;n 1"&gt;
                                      Descripci&amp;#243;n 1
                                  &lt;/option&gt;
                                  &lt;option value="Descripci&amp;#243;n 2"&gt;
                                      Descripci&amp;#243;n 2
                                  &lt;/option&gt;
                          &lt;/select&gt;
                          &lt;span class="field-validation-valid text-danger" data-valmsg-for="TipoVisitante" data-valmsg-replace="true"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-md-offset-2 col-md-10"&gt;
                          &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/form&gt;
  
      &lt;script src="/Scripts/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/respond.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/revision.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>