Html 跨浏览器图例居中

我在我的图例上得到了不同的结果，主要集中在浏览器上：

应该是这样的：

但是，我在其他浏览器上获得了不同的页边距：

HTML

<div class="teaser-header">
<fieldset class="teaser-fieldset">
  <legend class="teaser-legend">We are a very passionate team</legend>
  <h1>Who we are</h1>
</fieldset>
</div>

---

有什么想法吗？谢谢

将

左边距

和

右边距

明确设置为10%，似乎可以解决定心问题。10%的值只是（100%-

宽度

）的一半

.trister标题{
填充顶部：70px；
}
.trister字段集{
边框：1px纯白；
颜色：白色；
文本对齐：居中；
宽度：400px；
保证金：自动；
}
.Triser字段集h1{
颜色：白色；
文本对齐：居中；
保证金：0；
垫底：20px；
字体系列：“蒙特塞拉特”；
}
.挑逗传奇{
/*填充：0 10px；移除此*/
宽度：80%；
左边距：10%；/*更改此值*/
右边距：10%；/*更改此值*/
颜色：白色；
字号：1em；
文本转换：大写；
页边距底部：0；
文本对齐：居中；/*添加此*/
}
身体{
背景：黑色；
}

我们是一个充满激情的团队
我们是谁

哪个图像来自哪个浏览器？是否适合您？我在旧版本的Firefox中看到了一个非常类似于屏幕截图的问题，这个小提琴解决了这个问题。我不确定你在看哪个浏览器，所以不确定它是否解决了你的问题。如果是这样的话，我将作为答案发布。大家好，EDGE、FIREFOX、EXPLORER中都出现了问题，它们都引入了自己的页边距。谢谢@Harry看起来是这样的，你只在每边引入了10%的利润率？是的@Gibson。我没有将其设置为自动，而是将其设置为（100%-

width

）/2。吉布森：事实上，即使将利润率改为10%，IE11和Edge的表现也不一样。我删除了

padding:0 10px

并在图例中添加了

text align:center

，并且在IE11、Edge、Firefox、Chrome和Opera（所有最新版本）中的输出都是相同的。

.teaser-header {
    padding-top: 70px;
}
.teaser-fieldset {
  border: 1px solid white;
  color: white;
  text-align: center;
  width: 400px;
  margin: auto;
}

.teaser-fieldset h1 {
  color: white;
  text-align: center;
  margin: 0;
  padding-bottom: 20px;
  font-family: "Montserrat";
}

.teaser-legend {
  padding: 0 10px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-size: 1em;
  text-transform: uppercase;
  margin-bottom: 0;
}