Как вывести блок по центру?

Не могу понять почему форма авторизации не появляется по центру? В чем проблема, подскажите пожалуйста. Код простой, ну нужного результата не могу добиться

/*Background */

body {
  background: url(/images/bg/bg-6.png)
}


/* Form Style */

.form-horizontal {
  background: #fff;
  padding-bottom: 40px;
  border-radius: 15px;
  text-align: center;
}

.form-horizontal .heading {
  display: block;
  font-size: 35px;
  font-weight: 700;
  padding: 35px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30px;
}

.form-horizontal .form-group {
  padding: 0 40px;
  margin: 0 0 25px 0;
  position: relative;
}

.form-horizontal .form-control {
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 0 20px 0 45px;
  height: 40px;
  transition: all 0.3s ease 0s;
}

.form-horizontal .form-control:focus {
  background: #e0e0e0;
  box-shadow: none;
  outline: 0 none;
}

.form-horizontal .form-group i {
  position: absolute;
  top: 12px;
  left: 60px;
  font-size: 17px;
  color: #c8c8c8;
  transition: all 0.5s ease 0s;
}

.form-horizontal .form-control:focus+i {
  color: #00b4ef;
}

.form-horizontal .fa-question-circle {
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 60px;
  font-size: 20px;
  color: #808080;
  transition: all 0.5s ease 0s;
}

.form-horizontal .fa-question-circle:hover {
  color: #000;
}

.form-horizontal .main-checkbox {
  float: left;
  width: 20px;
  height: 20px;
  background: #11a3fc;
  border-radius: 50%;
  position: relative;
  margin: 5px 0 0 5px;
  border: 1px solid #11a3fc;
}

.form-horizontal .main-checkbox label {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.form-horizontal .main-checkbox label:after {
  content: "";
  width: 10px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 4px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.form-horizontal .main-checkbox input\[type=checkbox\] {
  visibility: hidden;
}

.form-horizontal .main-checkbox input\[type=checkbox\]:checked+label:after {
  opacity: 1;
}

.form-horizontal .text {
  float: left;
  margin-left: 7px;
  line-height: 20px;
  padding-top: 5px;
  text-transform: capitalize;
}

.form-horizontal .btn {
  float: right;
  font-size: 14px;
  color: #fff;
  background: #00b4ef;
  border-radius: 30px;
  padding: 10px 25px;
  border: none;
  text-transform: capitalize;
  transition: all 0.5s ease 0s;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top:10%">
  <div class="row">
    <div class="col-md-offset-6 col-md-6">
      <form class="form-horizontal">
        <span class="heading">АВТОРИЗАЦИЯ</span>
        <div class="form-group">
          <input type="email" class="form-control" id="inputEmail" placeholder="E-mail">
          <i class="fa fa-user"></i>
        </div>
        <div class="form-group help">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          <i class="fa fa-lock"></i>
          <a href="#" class="fa fa-question-circle"></a>
        </div>
        <div class="form-group">
          <div class="main-checkbox">
            <input type="checkbox" value="none" id="checkbox1" name="check" />
            <label for="checkbox1"></label>
          </div>
          <span class="text">Запомнить</span>
          <button type="submit" class="btn btn-default">ВХОД</button>
        </div>
      </form>
    </div>

  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

В проекте подключен Bootstrap v3.4.1


Ответы (1 шт):

Автор решения: entithat

Самый простой вариант исходя из того, что у вас уже есть - изменить col-offset-md-6 на 3, т.к. в бутстрапе 12 столбцов, а вы пропускаете 6 и добавляете еще 6.

/*Background */

body {
  background: url(/images/bg/bg-6.png)
}


/* Form Style */

.form-horizontal {
  background: #fff;
  padding-bottom: 40px;
  border-radius: 15px;
  text-align: center;
}

.form-horizontal .heading {
  display: block;
  font-size: 35px;
  font-weight: 700;
  padding: 35px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30px;
}

.form-horizontal .form-group {
  padding: 0 40px;
  margin: 0 0 25px 0;
  position: relative;
}

.form-horizontal .form-control {
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 0 20px 0 45px;
  height: 40px;
  transition: all 0.3s ease 0s;
}

.form-horizontal .form-control:focus {
  background: #e0e0e0;
  box-shadow: none;
  outline: 0 none;
}

.form-horizontal .form-group i {
  position: absolute;
  top: 12px;
  left: 60px;
  font-size: 17px;
  color: #c8c8c8;
  transition: all 0.5s ease 0s;
}

.form-horizontal .form-control:focus+i {
  color: #00b4ef;
}

.form-horizontal .fa-question-circle {
  display: inline-block;
  position: absolute;
  top: 12px;
  right: 60px;
  font-size: 20px;
  color: #808080;
  transition: all 0.5s ease 0s;
}

.form-horizontal .fa-question-circle:hover {
  color: #000;
}

.form-horizontal .main-checkbox {
  float: left;
  width: 20px;
  height: 20px;
  background: #11a3fc;
  border-radius: 50%;
  position: relative;
  margin: 5px 0 0 5px;
  border: 1px solid #11a3fc;
}

.form-horizontal .main-checkbox label {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.form-horizontal .main-checkbox label:after {
  content: "";
  width: 10px;
  height: 5px;
  position: absolute;
  top: 5px;
  left: 4px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.form-horizontal .main-checkbox input\[type=checkbox\] {
  visibility: hidden;
}

.form-horizontal .main-checkbox input\[type=checkbox\]:checked+label:after {
  opacity: 1;
}

.form-horizontal .text {
  float: left;
  margin-left: 7px;
  line-height: 20px;
  padding-top: 5px;
  text-transform: capitalize;
}

.form-horizontal .btn {
  float: right;
  font-size: 14px;
  color: #fff;
  background: #00b4ef;
  border-radius: 30px;
  padding: 10px 25px;
  border: none;
  text-transform: capitalize;
  transition: all 0.5s ease 0s;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top:10%">
  <div class="row">
    <div class="col-md-offset-3 col-md-6">
      <form class="form-horizontal">
        <span class="heading">АВТОРИЗАЦИЯ</span>
        <div class="form-group">
          <input type="email" class="form-control" id="inputEmail" placeholder="E-mail">
          <i class="fa fa-user"></i>
        </div>
        <div class="form-group help">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
          <i class="fa fa-lock"></i>
          <a href="#" class="fa fa-question-circle"></a>
        </div>
        <div class="form-group">
          <div class="main-checkbox">
            <input type="checkbox" value="none" id="checkbox1" name="check" />
            <label for="checkbox1"></label>
          </div>
          <span class="text">Запомнить</span>
          <button type="submit" class="btn btn-default">ВХОД</button>
        </div>
      </form>
    </div>

  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

→ Ссылка