Javascript div中居中的元素似乎偏离中心

我正在制作一个网站，出于测试的原因，我调用了

yet.io

我目前正试图将

输入

和

h1

垂直和水平居中于

div

内部，但由于某些原因，元素总是以某种方式出现偏移

---

为什么会这样？我希望元素像中间任何一个规则的“IO游戏”一样居中。我有一些jQuery使元素淡入，这是问题吗？我被难住了

$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
显示：表格；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
显示：块；
保证金：0自动；
文本对齐：居中；
}

yeet.io
您需要将每个元素包装在它们自己的假表行中


$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
显示：表格；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
显示：块；
保证金：0自动；
文本对齐：居中；
}
.行{
显示：表格行；
}

yeet.io
您需要将每个元素包装在它们自己的假表行中


$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
显示：表格；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
显示：块；
保证金：0自动；
文本对齐：居中；
}
.行{
显示：表格行；
}

yeet.io
通过在
.container
上设置
display:table
，在
.yeet上设置
display:table cell
，您当前正在使用
表格

这可能是无意的，事实上，删除这两个声明会自动生成所需的结果——您根本不需要更改HTML，也不需要创建任何新的CSS规则


$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
垂直对齐：中间对齐；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
显示：块；
保证金：0自动；
文本对齐：居中；
}

yeet.io
通过在
.container
上设置
display:table
，在
.yeet上设置
display:table cell
，您当前正在使用
表格

这可能是无意的，事实上，删除这两个声明会自动生成所需的结果——您根本不需要更改HTML，也不需要创建任何新的CSS规则


$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
垂直对齐：中间对齐；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
显示：块；
保证金：0自动；
文本对齐：居中；
}

yeet.io

$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
文本对齐：居中；
}

yeet.io

$（“.yeet”）.hide（）；
$（文档）.ready（函数（）{
美元（“.yeet”）。展览（2000年）；
$（“.昵称”）.show（2000年）；
});
正文{
宽度：100%；
身高：100%；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
身高：100%；
宽度：100%；
}
yeet先生{
字体家族：“学铃”，草书；
字体大小：75px；
文本对齐：居中；
}
.昵称{
字体家族：“学铃”，草书；
文本对齐：居中；
}

yeet.io
当您说要将两个元素居中时，您希望它们的居中程度如何？是
顶部的
，还是
右侧的
？将这两个元素水平和垂直居中意味着它们彼此重叠，这可能不是有意的和
显示：表格单元格您正在有效地创建一个
。我怀疑您不想这样做。@obsidiange我希望
在
下面。“我有一些jQuery可以使元素淡入，这可能是问题吗？”所以去掉jQuery。消除