如何将<hr />标签移动到中心

Question

我尝试将<hr> tag移到中心，它移到了中心，但是右方向不在中心。

/* start set fonts */

* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}


/* start general page */

html body {
  background-color: #181333;
}


/* start container */

.container {
  width: 100%;
  background-color: #1e1939;
  position: absolute;
  top: 50%;
}


/* start title */

.title {
  display: block;
  margin: 5px;
  padding: 5px;
  color: #fefefe;
  text-align: center;
  letter-spacing: 15px;
}


/* start main line */

.main_line {
  display: block;
  width: 5%;
  position: absolute;
  left: 50%;
}

<div class="container">
  <h1 class="title">OUR TEAM</h1>
  <hr class="main_line"> </div>

出什么问题了？ ，谢谢您提前...........................

Answer 1

只需使用margin:auto而不是position:absolute。它快乐地生活在容器中：

.main_line {
  display: block;
  width: 5%;
  margin:auto
}

/* start set fonts */

* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}


/* start general page */

html body {
  background-color: #181333;
}


/* start container */

.container {
  width: 100%;
  background-color: #1e1939;
  position: absolute;
  top: 50%;
}


/* start title */

.title {
  display: block;
  margin: 5px;
  padding: 5px;
  color: #fefefe;
  text-align: center;
  letter-spacing: 15px;
}


/* start main line */

.main_line {
  display: block;
  width: 5%;
  margin:auto
}

<div class="container">
  <h1 class="title">OUR TEAM</h1>
  <hr class="main_line"> 
</div>

Answer 2

保证金：0自动是一个很好的答案，但您也可以使用翻译来实现；

/* start set fonts */
* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

/* start general page */
html body {
    background-color: #181333;
}

/* start container */
.container {
    width: 100%;
    background-color: #1e1939;
    position: absolute;
    top: 50%;
}

/* start title */
.title {
    display: block;
    margin: 5px;
    padding: 5px;
    color: #fefefe;
    text-align: center;
    letter-spacing: 15px;
}

/* start main line */
.main_line {
    display: block;
    width: 5%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<div class="container">
<h1 class="title">OUR TEAM</h1>
<hr class="main_line">
 </div>