html - 我如何将 <hr> 标签移动到中心

Question

我试过移动 <hr> tag to center ，它移动​​到中心但右方向不在中心。

/* 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>