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

【问题标题】：Position element in middle of screen using CSS使用 CSS 将元素定位在屏幕中间
【发布时间】：2015-03-23 17:19:11
【问题描述】：

在我的网站建成后，我每天都在尝试修改一些内容以使其更具响应性。它是在 Muse 中制作的，所以不要期望太多“响应能力”。

我有这个类的一个元素：

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

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

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

更新 2：这是一个活生生的例子。想象一下，该类应用于每个 TAG（当然不是菜单）。

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

【问题讨论】：

将标签放置在水平可滚动元素之外，位置固定，zindex更大。
@Ricky 问题在于滚动时会滑动的大标签？
是的。正如您在链接中看到的那样.. 缩小时保持在靠近顶部的固定位置。我想保持位置：固定但保持在中间。 :(
如果有人想要我可以用 html 导出这个网站。我不希望你写代码。没门。只是想看看如何实现，因为 muse 的标记语言不好。

标签： html css responsive-design

【解决方案1】：

您可以为这些大标签添加以下 css：

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

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

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

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

检查一下，告诉我进展如何。

【讨论】：

谢谢我试过了，但没用。 Muse 以不同的方式定义 100%。 CSS：身体{位置：相对；最小宽度：960px；填充顶部：36px；底部填充：36px； }
#page { z-index: 1;宽度：960px；最小高度：4940px；背景图像：无；边框样式：无；边框颜色：透明；背景颜色：透明；底部填充：0px；左边距：自动；边距右：自动； }
Muse.Utils.fullPage('#page');/* 100% 高度页面 */
@Ricky 你不能定义某种类来设置所有这些标签吗？如果是这样，您可以通过将其包含在 css 中或通过内联样式来覆盖它的输出？
喜欢在该类中设置：top: 50% !important

【解决方案2】：

有关使用 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 偏移量是宽度和高度的一半。

【讨论】：

谢谢，我已经看过了。问题是（我忘了提）位置必须固定，因为所有元素（它们来自屏幕右侧）都有水平滚动功能，因此它们必须位于固定位置。有没有固定位置的方法？
你能发布一个关于你的布局示例的小提琴吗？
在 Jsfiddle 上不可能做到这一点。我可以在 adobe 业务催化剂上创建一个临时站点并将其发布在这里。这不会花时间。你怎么看？
如果其他发布的答案对您也不起作用，那就去吧。
请检查链接（见帖子）

【解决方案3】：

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

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/

【讨论】：

没有。我试过这个。它不起作用。位置必须固定（我们无法更改）。不过谢谢
为什么不使用浮点数呢？所有项目将彼此相邻。但我无法想象如果你不给我们一个你的代码示例。
@Ricky stackoverflow.com/questions/2861247/…
请检查链接（见帖子）

【解决方案4】：

jQuery 是你最好的选择。

我会将您的班级设置为固定位置，然后尝试使用以下内容。

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

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

【讨论】：

【解决方案5】：

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

http://jsfiddle.net/cqztf9kc/

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

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

【讨论】：