Html 如何使每台设备的一切都成为中心？

我做了一个简单的

然而，并非所有的事物都集中在每一个装置的中间。我不确定这是否只是发生在我身上，或者我是否做得不对

这就是我脸上的样子

这就是我脸上的样子

这是代码片段-尝试打开手机上的。谢谢

正文{
保证金：0；
填充：0；
背景：#262626；
字体系列：Futura，Futura Medium，“Futura Medium”，“世纪哥特式”，CenturyGothic，“苹果哥特式”，AppleGothic，“URW哥特式L”，“先锋派”，无衬线；
字体：斜体；
文本对齐：居中；
-webkit动画方向：正常；
-webkit动画持续时间：22秒；
-webkit动画迭代计数：无限；
-webkit动画名称：文本；
-webkit动画计时功能：轻松；
}
h1{
字体大小：100px；
}
梅因先生{
位置：绝对位置；
左：50%；
最高：50%；
转换：转换（-50%，-50%）
}
保险商实验室{
显示器：flex；
位置：绝对位置；
左：50%；
最高：70%；
转换：转换（-50%，0）
}
ulli{
列表样式：无；
}
ullia{
过渡：.5s；
宽度：80px；
高度：80px；
文本对齐：居中；
线高：80px；
字体大小：35px；
显示：块；
-webkit动画方向：正常；
-webkit动画持续时间：22秒；
-webkit动画迭代计数：无限；
-webkit动画名称：文本；
-webkit动画计时功能：轻松；
}
悬停{
字体大小：45px；
}
#粒子js{
背景尺寸：封面；
身高：100%；
宽度：100%；
位置：固定；
z指数：-1；
}
#日期{
位置：绝对位置；
字体大小：25px；
}
@-webkit为文本设置关键帧{
0%{color:#39f；}
15%{颜色：#8bc5d1；}
30%{颜色：#f8cb4a；}
45%{颜色：#95b850；}
60%{颜色：#944893；}
75%{颜色：#c71f00；}
90%{颜色：#bdb280；}
100%{颜色：#39f；}
}

卡扎姆

引导对屏幕大小做出响应。 我一直很幸运地使用引导，而不是在css中做这样的事情：

.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

查看此网站：

---

使用绝对位置和上/左50%来居中对象是不好的做法。 你可以用flex做得更好。将容器设置为

display: flex;
align-items: center;
justify-content: center;

并删除绝对位置。另外，请注意，您有一些不受支持的css规则，例如

填充内联开始

简单的使用示例

html，正文{
身高：100%；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
}
.把我放在中间{
宽度：70px；
高度：70像素；
边框：1px纯黑；
背景色：#bada55；
}

---

我建议您使用引导，而不是尝试重新发明轮子。您指的是您的站点在各种设备上的响应能力。所以，如果您还没有这样做，请尝试引导。