CSS left属性值在不同的窗口大小下不能很好地工作吗？

Question

我为我的网页设计课程创建了一组HTML页面，但我故意对其进行设计，以使其仅在笔记本电脑上看起来不错。我的其中一页包含一个p标签，该标签以66％的left属性居中，效果非常好。但是，当我在较大的屏幕上（例如台式机显示器）查看它时，它并没有居中对齐。

我在宽度，向左和向右等不同属性上尝试了许多不同的值，但似乎在两个屏幕上均无效。我什至尝试使用它所包含的div，但没有运气。

这是p（abouttext）和div（abouttextbox）标签的CSS。

#abouttextbox {
    position: relative;
    height: 100%;
    width: 100%;
}

#abouttext {
    position: relative;
    font-family: "Georgia", sans-serif;
    color: #e8e8e8;
    font-size: 1em;
    width: 100%;
    text-align: center;
    opacity: 0;
    top: 65%;
}

可以在https://skszeto.com/about/

查看该页面

感谢您的帮助。谢谢！

Answer 1

您为什么将position: absolute放到body ....为什么为什么为什么......

我也可以看到您的#abouttextbox的css规则和#abouttext具有position: relative的...是否有任何理由让position如此混乱？

只需从正文中删除position: absolute，使文本对我而言居中...

Answer 2

只需将#abouttextbox的 width 替换为

margin-left: 25%;
margin-right:25%;

是的，它适用于所有尺寸的屏幕。您的整体CSS应该如下所示：

#abouttextbox {
position: relative;
height: 100%;
padding-left:25%;
padding-right:25%;
}

#abouttext {
position: relative;
font-family: "Georgia", sans-serif;
color: #e8e8e8;
font-size: 1em;
width: 100%;
text-align: center;
opacity: 0;
top: 65%;
}