以屏幕为中心[关闭]答案

【问题标题】：Centering to the screen [closed]以屏幕为中心[关闭]
【发布时间】：2013-09-24 18:01:00
【问题描述】：

我想把sign in 按钮放在HERE 中页面的水平和垂直中心。我曾尝试将锚标记放入另一个 div，但它没有奏效。我该怎么做？

【问题讨论】：

你没有提到如果你想水平和/或垂直居中......无论如何，有很多关于它的帖子，请搜索或指定更好的问题。
这可能是最asked questions in the CSS tag 之一。先来个search on stackoverflow 怎么样？
也许这会有所帮助：w3.org/Style/Examples/007/center.en.html
@MathijsFlietstra 我还有一个其他问题，大多数问题都不包括在内。有一个透明的盖子。所以我不能使用z-index，我必须使用position:
@Tahtakafa - 这没有多大意义，z-index 与居中无关，在定位事物时使用position: 也是给定的。在我看来，您似乎不想花任何精力来看看如何自己做。如果您查看我上一个问题中的第一个链接，它清楚地解释了如何使任何元素居中，并且看起来您完全有能力为其添加透明封面。

标签： css

【解决方案1】：

使事物居中是计算机科学中最难的问题。

实际上，这取决于您是要垂直居中还是水平居中。水平居中可以通过在父元素上设置 text-align: center 或者通过给元素一个明确的宽度和 margin: auto 来实现。

垂直居中更难。您可以设置 margin-top: 或绝对定位元素的 top: 以将其向下推，但您必须将其定位在 (50% of container height) - (element height / 2)，这是 CSS 无法做到的自动地。如果元素或其容器的高度发生变化，您需要手动或使用 Javascript 进行调整。

这仍然是一种相对较新的技术，但灵活的盒子模型在这方面做得很好。它有点复杂，有很多供应商前缀和浏览器不一致需要解决，但你可以谷歌它。

每个人都会因为我这么说而讨厌我，但在我那个年代，我们只是使用一张桌子然后继续我们的生活。查看表格单元格允许您使用垂直对齐：中间；完全按照您的期望去做。

#abusedTable{
    width: 100%;
}
#abusedTable td{
    height: 500px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
}

http://jsfiddle.net/arkanciscan/5WYmx/

【讨论】：

【解决方案2】：

您需要移除按钮上的绝对定位，并将“text-align: center”放在包含该按钮的 div 上。

【讨论】：

【解决方案3】：

把代码改成这个

html:

<div id="signupCover"><a id="signin_button" href="./index.php">Sign in</a></div>

css:

#signupCover {

    background-color: #ccc;
    opacity:0.6;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
}

#signin_button{
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    background-color: #0096cc;
    padding: 14px 24px 14px 24px;
    font-size: 28px;
    font-weight:700;
    color: #cca;
    z-index: 99;
}
#signin_button:hover{
    background-color: #0277a3;
    color: white;
}

【讨论】：

【解决方案4】：

<style>
#signin_button{
    text-align: center;
    text-decoration: none;
    background-color: #0096cc;
    padding: 14px 24px 14px 24px;
    font-size: 28px;
    font-weight:700;
    color: #cca;
    z-index: 99;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:100px;
}
#signin_button:hover{
    background-color: #0277a3;
    color: white;
}
</style>
<a id="signin_button" href="./index.php">Sign in</a>

【讨论】：

【解决方案5】：

让你的代码像http://jsfiddle.net/judearasu/YvbZX/

<div>
<a href="javascript:void(0);">Sign In</a>
</div>

*{
  padding: 0px;
  margin:0px;
 }
div
 {
  background-color: #0096cc;
  padding: 14px 24px 14px 24px;
  font-size: 28px;
  font-weight:700;
  color: #cca;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100px;
  height:50px;
  margin: auto;
  text-align: center;
}

【讨论】：