html - 如何使边框与宽度匹配的 HTML 元素居中

Question

棘手的一个，我有一个 HTML 标题，上面应用了 border-top 和 border-bottom。我可以将它居中以使边框与元素的宽度相同吗？现在我不得不悲惨地使用宽度，这根本不是一个好的解决方案。

演示请看这里:http://codepen.io/anon/pen/KIJAh

HTML

<div>
<h3 class="removeMe">All your base</h3>
</div>

CSS

div {
 padding-top: 30px;
 height: 100px;
 width: 300px;
 margin: 0 auto;  
 background-color: Moccasin;
}

h3 {
  text-align: center;
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black; 
  margin: 0 auto;
}

.removeMe {
 width:160px;
}

Answer 1

我能想到的主要有两个选项:

1) 将 h3 设置为 display: inline 并设置父元素为 text-align: center