Почему центрирование тега так сложно. У меня болела голова при попытке центрировать с помощью bootstrap

#css #twitter-bootstrap #bootstrap-4

#css #twitter-bootstrap #bootstrap-4

Вопрос:

я работал над некоторым кодом, но когда я попробовал center <hr> использовать align атрибут, он не мог не center отбросить себя влево. Вот пример кода.

 body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1{
    font-size: 3rem;
    color: #e2dbdb;

}
hr{
    border-radius: 5px;
    max-width: 65px;
    align-items: center;
}
.buffer{
    padding: 5rem;
}
.btn-xl{
    padding: 0.7rem 0.8rem;
    /*border-radius: 5px;*/
} 
 <body>
  <div class="container d-flex align-items-center h-100 ">
    <div class="row">
      <header class="text-center col-12">
        <h1>THE BEST START UP OF THE YEAR</h1>
      </header>
      <div class="col-12 buffer"></div>
      <section class="text-center col-12">

        <hr class="border border-primary">

        <button class="btn btn-primary btn-xl">FIND OUT MORE</button>
      </section>

    </div>
  </div>

</body> 

Но когда я помещаю его в center тег, он внезапно центрируется

 body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-size: 3rem;
  color: #e2dbdb;
}

hr {
  border-radius: 5px;
  max-width: 65px;
  align-items: center;
}

.buffer {
  padding: 5rem;
}

.btn-xl {
  padding: 0.7rem 0.8rem;
  /*border-radius: 5px;*/
} 
 <body>
  <div class="container d-flex align-items-center h-100 ">
    <div class="row">
      <header class="text-center col-12">
        <h1>THE BEST START UP OF THE YEAR</h1>
      </header>
      <div class="col-12 buffer"></div>
      <section class="text-center col-12">
        <center>
          <hr class="border border-primary">
        </center>

        <button class="btn btn-primary btn-xl">FIND OUT MORE</button>
      </section>

    </div>
  </div>

</body> 

так почему же выравнивание не работает на <hr>

Комментарии:

1. Учитывая ваши примеры, я не могу воспроизвести проблему. В обоих случаях hr охватывает всю ширину.

2. Какой браузер вы используете? В Firefox я вижу небольшой HR в середине страницы. Но это может зависеть от браузера. Попробуйте использовать <div class="hr"></div> этот стиль по мере необходимости

3. Я использую Chrome 88. Тем не менее, <center> он устарел , вам следует избегать его использования.

4. спасибо, ребята, я наконец-то понял это. я использовал bootsrap, чтобы центрировать его. и йошилу спасибо за то, что попал в <центр>.