Javascript css定位我的定位有问题

我对web开发还不熟悉，我在定位上有一个小问题，我在其中放置了一个元素，所有的单词都是抱怨的，而不是在一行中。有人能帮我解决吗。到目前为止，定位对我来说是一个大问题，如果你们知道我可以从哪里学到更多关于css定位的信息

@导入url（'https://fonts.googleapis.com/css?family=Yantramanav:100');
@导入url（'https://fonts.googleapis.com/css?family=Montserrat:400');
@导入url（'https://fonts.googleapis.com/css?family=Poiret+一);；
html，正文{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
.介绍{
身高：100%；
宽度：100%；
保证金：自动；
显示：表格；
排名：0；
背景尺寸：封面；
背景：url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)无重复50%50%；
}
.内部介绍{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：100%；
最大宽度：无；
}
.内容{
最大宽度：600px；
保证金：0自动；
文本对齐：居中；
}
.内容h1{
字体系列：“Yantramana”；
字体大小：600%；
字号：100；
颜色：#E1EFE9；
线高：70%；
}
.btn{
字体系列：“蒙特塞拉特”；
字体大小：135%；
字体大小：400；
颜色：橙色；
文本转换：大写；
文字装饰：无；
边框：实心#ffffff；
填充：10px 20px；
边界半径：9px；
过渡：所有0.7秒；
}
.btn:悬停{
颜色：#CBDFD6；
边框：实心#CBDFD6；
}
.关于我们{
身高：100%；
宽度：100%；
保证金：自动；
显示：表格；
背景色：#ffffff；
背景尺寸：封面；
位置：相对位置；
}
.ab含量{
字体系列：“Poiret One”；
字体重量：较轻；
位置：绝对位置；
字体大小：150%；
左：50%；
转化：translateX（-50%）；
}
.ab-p{
位置：绝对位置；
排名前10%；
左：50%；
字体重量：较轻；
转化：translateX（-50%）；
字体系列：“蒙特塞拉特”；
}
.颜色{
颜色：橙色；
}
/*---媒体查询--*/
@媒体屏幕和屏幕（最大宽度：900px）{
}
@媒体屏幕和屏幕（最大宽度：768px）{
}
@媒体屏幕和屏幕（最大宽度：480px）{
}

全屏登录页
找到你的口味！
我们的使命
我们的使命是提供最好的食物

我想您希望“我们的使命”部分居中且可读

.ab-p {
    font-weight: lighter;
    font-family: "montserrat";
    text-align: center;
}

h2 {
    text-align: center;
}

建议：除非您绝对需要，否则不要使用

position:absolute

，因为此规则会从浏览器的自动定位中删除元素-这意味着您完全可以控制元素的定位位置。

“相对”位置与位置相关，因此可以避免混乱

.ab内容{
字体系列：“Poiret One”；
字体重量：较轻；
位置：相对位置；
字体大小：150%；
左：50%；
转化：translateX（-50%）；
}

您的内容类的宽度为600px，并且文本和字体都很大，因此，如果内容大于宽度，它将打断成新行。增加宽度或减小字体大小，文本将在一行中。您应该了解

position:absolute

及其实际功能。使用here.w3school position属性几乎肯定是错误的