使用 CSS 将元素定位在屏幕中间

Question

在我的网站完成后，我每天都在尝试修改一些东西，让它更具响应性。它是在 Muse 中制作的，所以不要对 "responsiveness".

抱太大期望

我有这个元素 class:

#labelstrong
 {
    z-index: 17;
    width: 633px;
    background-color: transparent;
    color: #FFFFFF;
    text-align: justify;
    position: fixed;
    top: 1542px;
    left: 164px;
 }

通常情况下，元素位于屏幕中间。但是当我缩小时，元素与屏幕顶部保持相同的距离（当然是因为 top 属性）。我怎样才能定义它的位置，即使我放大或缩小它仍然在屏幕中间。

更新：问题是（我忘了提及）位置必须固定，因为所有元素都有水平滚动功能（它们来自屏幕右侧），因此它们必须位于固定位置。

更新 2：这是一个活生生的例子。假设 class 应用于每个 TAG（当然不是菜单）。

http://2323029s8s8s8.businesscatalyst.com/index.html

Answer 1

请参阅此资源以了解使用 CSS 居中元素的技术：Centering in CSS: A Complete Guide

如果您创建一个相对定位的父容器元素，您可以轻松地将您的子元素居中：

.parent {
  position: relative;
}

#labelstrong {
  z-index: 17;
  background-color: transparent;
  color: #FFFFFF;
  text-align: justify;
  position: absolute;

  width: 634px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -317px;
}

请注意，margin 偏移量是宽度和高度的一半。

Answer 2

尝试使用百分比而不是像素，例如：

top: 10%;

如果您想水平居中，请尝试将边距设置为自动：

margin: 0 auto;

您的代码如下所示：

#labelstrong {
    z-index: 17;
     width: 633px;
     background-color: transparent;
     color: #FFFFFF;
     text-align: justify;
     position: relative;
     top: 10%;
     margin: 0 auto;
}

看看这个例子：http://jsfiddle.net/5a6fyb21/

Answer 3

jQuery 是您最好的选择。

我只是将您的 class 设置为固定位置，然后尝试使用以下内容。

$(window).resize(function() {    
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});

使用调整大小功能，以便在 window 调整大小时它会保持在原位。

Answer 4

水平滚动内容上的居中标签：

http://jsfiddle.net/cqztf9kc/

.fixed {
    margin: 50%;
    position: fixed;
    z-index: 1;
}

.content {
    x-overflow: scroll;
    height: 100%;
}

Answer 5

您可以为那些大标签添加以下 css:

.fixed-big-tag{
   top: 50%;
   transform: translateY(-50%);
}

另外，作为应对措施，请确保 <body> 和 <html> 具有 100% 的高度

另一个想法是使用 top property 的 !important 规则来覆盖 Muse 输出的内容。（或任何需要覆盖的规则）

如果可行，您可以在所有这些需要居中的标签上添加一个新的 class 并通过 css

覆盖它

检查一下，让我知道进展如何。

使用 CSS 将元素定位在屏幕中间

Position element in middle of screen using CSS

html

css

responsive-design