Css 以屏幕为中心

我想把

登录

按钮放在页面水平和垂直的中心位置。我试着把锚标签放进另一个div，但没用。如何操作？

您需要删除按钮上的绝对位置，并将“文本对齐：居中”放在包含按钮的div上。

将代码更改为

html:

---

以事物为中心是计算机科学中最难的问题

实际上，这取决于你想要垂直还是水平居中。水平居中可以通过在父元素上设置text align:center，或为元素指定明确的宽度和边距：auto

垂直定心比较困难。您可以设置元素的边距top:或绝对定位top:以将其向下推，但必须将其定位在（容器高度的50%）-（元素高度/2），这是CSS无法自动完成的。如果元素或其容器的高度发生变化，则需要手动或使用Javascript进行调整

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

每个人都会因为我这么说而恨我，但在我的时代，我们只是坐在一张桌子上继续我们的生活。请参见表格单元格允许您使用垂直对齐：中间；做你希望它做的事

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

#登录按钮{
文本对齐：居中；
文字装饰：无；
背景色：#0096cc；
填充：14px 24px 14px 24px；
字号：28px；
字号：700；
颜色：#cca；
z指数：99；
位置：绝对位置；
左：0；
右：0；
左边距：自动；
右边距：自动；
宽度：100px；
}
#登录按钮：悬停{
背景色：#0277a3；
颜色：白色；
}

将您的代码设置为

*{
填充：0px；
边际：0px；
}
div
{
背景色：#0096cc；
填充：14px 24px 14px 24px；
字号：28px；
字号：700；
颜色：#cca；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
宽度：100px；
高度：50px；
保证金：自动；
文本对齐：居中；
}

您没有提到是否要水平和/或垂直居中。。。无论如何，关于这个问题有很多帖子，请搜索或详细说明这个问题。这可能是最重要的问题之一。第一个怎么样？也许这能帮上忙：@MathijsFlietstra我还有一个问题，大多数问题都没有。有一个透明的盖子。所以我不能使用z-index，我必须使用

位置：

@Tahtakafa-这没有多大意义，

z-index

与居中无关，而使用

位置：

也是定位事物时给定的。在我看来，你似乎不想投入任何精力去研究如何自己去做。如果你看一下我上一个问题中的第一个链接，它清楚地解释了如何将任何元素居中，看起来你完全有能力为它添加一个透明的盖子。

#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;
}

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

<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>

<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;
}