Question

我想要的是在页面加载时将“正在加载...”显示为一个简单的文本，我希望文本在水平和垂直方向都居中。我经历了很多例子，现在我有一些似乎有效的解决方案，但我有些怀疑效果会一直相同，而且我的代码甚至接近一个好的CSS。我所拥有的是一个index.php页面，就在<body>标签后面我有这个：

<body>

        <div id="loading-standard-user">
            <p id="loading-standard-user-text">Loading...</p>
        </div>

后来我有一个功能，负责在加载页面时隐藏文本，但我关心的是<div>和<p>标签的样式。这是我的CSS：

#loading-standard-user {
  width: 100%;
}

#loading-standard-user-text {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-family: arial;
  top: 50%;
  margin-top: -40px;
}

我很确定我有一些不必要的代码，同时我想念一些东西，我想知道的是我的font-size: 40px，如果我希望我的代码是垂直的，那就意味着稍后在我的margin-top上居中应该具有等于我的字体大小的一半的值，但是当margin-top与字体的大小相同时，它在视觉上看起来居中。无论如何对造型有任何想法，我的错误在哪里，我怎么能正确做到？

由于

Leron

Answer 1

您的CSS代码似乎几乎完全符合您的要求。我能找到的唯一问题是你的边缘应该是高度的-50％。你的div高度是40px（这是字体大小），所以你的margin-top应该是-20px，以准确居中。

更详细地说：top: 50%将文本的顶部设置在容器的中间位置。然后margin-top: -20px将它向上移动20px以使其居中。

编辑：如果您想使用em，如@mgibsonbr所建议，请尝试以下CSS：

#loading-standard-user {
  position: fixed;
  width: 100%;
  height:40px;
  top: 50%;
  margin-top: -2em;

}

#loading-standard-user-text {
  width: 100%;
  text-align: center;
  font-size: 4em;
  font-family: arial; 
}

Answer 2

#loading-standard-user似乎没必要，你的exampled工作得很好（至少在Firefox和Chrome上）只有第二条规则。（你在内部div上使用position: fixed这一事实会使你在外部无关的位置

对于top和margin-top问题，它可能看起来像是居中的，但这并不意味着它实际上是：

enter image description here

如果您担心稍后调整文字大小，我建议您使用em代替px来设置尺寸，这样当用户调整浏览器大小时，它们会自动调整文本。 1 em是大写“M”的高度，而1 ex是小写“x”的高度。

（不幸的是，实际上我无法使用em同时使用px它工作得很好。也许我错过了什么？）

使用CSS正确对中文本

2 个答案: