Javascript 添加非居中文本将移动居中元素

在放置了一个居中的标题之后，我用JS添加了一个非居中的输出。产生输出后，报头向左移动一位。如何解决这个问题

let output=[]；
函数spit（）{
for（设i=0；i<100；i++）{
输出推力（i）；
}
document.getElementById（“输出”）.innerHTML=
output.join（“
”）；
}

.header{
背景颜色：浅灰色；
边界：无；
颜色：黑色；
填充：17px 25px；
显示：块；
文本对齐：居中；
字体大小：36px；
宽度：100%；
左边距：自动；
右边距：自动；
}

测试页
按我！

如果您不希望h1因滚动条而移动，则必须使用css calc（）（可能还有其他一些东西）计算50vw-（宽度为1/2）。这是因为vw单位（视口宽度）不受滚动条的影响

滚动条不影响h1居中的一种方法是使用JQuery

$(#dictName).style.marginLeft = 'calc(50vw -'+(this.width/2)+'px)';

---

我还没有测试过这个，所以我不能100%确定它是否有效，但请告诉我它是否有效。按下按钮时，您可能需要重新运行此代码。

一个疯狂的解决方案可能是将您的身体高度设置为查看端口高度，这样您就可以从滚动开始，避免按下按钮时发生移位

let output=[]；
函数spit（）{
for（设i=0；i<100；i++）{
输出推力（i）；
}
document.getElementById（“输出”）.innerHTML=
output.join（“
”）；
}

正文{
最小高度：100vh；
}
.标题{
背景颜色：浅灰色；
边界：无；
颜色：黑色；
填充：17px 25px；
显示：块；
文本对齐：居中；
字体大小：36px；
宽度：100%；
左边距：自动；
右边距：自动；
}

测试页
按我！

我在css代码中添加了一个通用的{margin:0；padding:0；}。代码看起来是居中的，但我认为-50的边距（由自动边距创建）看起来很不对劲

let output=[]；
函数spit（）{
for（设i=0；i<100；i++）{
输出推力（i）；
}
document.getElementById（“输出”）.innerHTML=
output.join（“
”）；
}

*{
边距：0px；填充：0px；
}
钮扣{
/*左边距：15px*/
边缘顶部：7px；
字号：20pt；
身高：35磅；
}
.标题{
背景颜色：浅灰色；
/*边框：15px纯白；*/*如果您仍然想要“缩进”效果，请使用注释道具*/
颜色：黑色；
填充：17px 25px；
显示：块；
文本对齐：居中；
字体大小：36px；
宽度：100%；
右边距：自动；
左边距：自动；
}

测试页
按我！

通过谷歌搜索，我似乎找到了解决此问题的最简单方法，因此：

---

也许，这个问题应该以重复的形式结束，但我没有足够的声誉来做这件事。

@RachelGallen感谢您的编辑！我还没有掌握代码片段。看起来它仍然在居中。它只是向左移动，因为滚动条是在按下按钮后添加的。@EugeneBarsky代码片段图标位于右侧图片图标的t；您在撰写问题时可以在此处输入代码-仅供将来参考：）@RachelGallen谢谢，我会尝试使用它，它非常方便。@MichaelvE是的，我认为这就是原因，但它看起来很难看，所以如何避免这种行为？这会影响标题上的填充，但您可以使用border或outline作为解决方案，例如border:15px纯白；这将如何解决问题？初始外观仍将关闭，用户将不得不滚动？@RachelGallen我已在代码中添加了这3行，标题不再移动。我对html/css完全是新手，因此我无法解释它是如何工作的，但我的问题是m被解决了。它创建了一个滚动条（因此它会在不移动的情况下将其推过去）…所以位置仍然是关闭的？如果它对您有效的话…一切都好…@RachelGallen使用

*{margin:0px；padding:0px；}的解决方案也是如此

您认为是否更正确？这就是我用来防止溢出的方法。您仍然可以通过添加白色边框在标题上获得缩进效果。但这取决于您。

html {
  overflow-y: scroll;
}