HTML、CSS-将按钮与页面中心对齐_Html_Css

HTML、CSS-将按钮与页面中心对齐

html css

HTML、CSS-将按钮与页面中心对齐,html,css,Html,Css,我可以知道如何将登录按钮与页面中心对齐吗？我似乎无法做到这一点，尽管我从以前的帖子中尝试了很多类似的建议我需要帮助正文{ 背景：白色；保证金：0；字体系列：Arial； } .包装纸{ 文本对齐：居中； } 巴顿洛金先生{ 位置：绝对位置；最高：50%； } 钮扣{ 背景颜色：耐火砖；颜色：白色；填充：16px 25px；保证金：自动；边界：无；光标：指针；宽度：100%；边界半径：8px；显示：块；保证金：0自动； } 按钮：悬停{ 不透明度：0.8； } 登录

我可以知道如何将

登录按钮

与页面中心对齐吗？我似乎无法做到这一点，尽管我从以前的帖子中尝试了很多类似的建议

我需要帮助

正文{
背景：白色；
保证金：0；
字体系列：Arial；
}
.包装纸{
文本对齐：居中；
}
巴顿洛金先生{
位置：绝对位置；
最高：50%；
}
钮扣{
背景颜色：耐火砖；
颜色：白色；
填充：16px 25px；
保证金：自动；
边界：无；
光标：指针；
宽度：100%；
边界半径：8px；
显示：块；
保证金：0自动；
}
按钮：悬停{
不透明度：0.8；
}


登录

添加以下内容：

button {
    left : 50%;
}

这是你想要的吗

.buttonlogin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这会将按钮置于html的中心

正文{
背景：白色；
保证金：0；
字体系列：Arial；
}
巴顿洛金先生{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
钮扣{
背景颜色：耐火砖；
颜色：白色；
填充：16px 25px；
保证金：自动；
边界：无；
光标：指针；
宽度：100%；
边界半径：8px；
显示：块；
保证金：0自动；
}
按钮：悬停{
不透明度：0.8；
}


登录

.wrapper{
显示器：flex；
对齐内容：中心；}


样品

您已经为按钮指定了一个

位置为绝对值
，因此您也希望应用左：50%
但是，实际上您可能还希望从宽度中减去偏移量，以便元素完全保持在中心位置。在本例中，您正在查找左：45%
，因为元素的宽度为10%
。这同样适用于top
，可以使用
calc（50%-（48px/2））
计算：

正文{
背景：白色；
保证金：0；
字体系列：Arial；
}
.包装纸{
文本对齐：居中；
}
巴顿洛金先生{
位置：绝对位置；
顶部：钙（50%-（48px/2））；
左：45%；/*计算（50%-（10%/2））*/
}
钮扣{
背景颜色：耐火砖；
颜色：白色；
填充：16px 25px；
保证金：自动；
边界：无；
光标：指针；
宽度：100%；
边界半径：8px；
显示：块；
保证金：0自动；
}
按钮：悬停{
不透明度：0.8；
}

登录

点击我
非常感谢您的反馈，非常感谢。它起作用了，但它并没有真正与中心对齐，相反，它略高于左侧的50%。我添加了这行transform:translate（-50%，-50%）并且它工作得很好。：）不鼓励只使用代码的答案，因为它们没有解释如何解决问题中的问题。考虑更新你的答案来解释这个问题，以及它是如何解决问题的。请回顾，非常感谢您的反馈，这也有帮助，但只是它没有对齐页面的中心。不过，非常感谢您抽出时间。真的很感激！：）非常感谢，您的解释和代码是可以理解的！真的很感激：）不客气，伙计。请考虑接受我的答案，其他人知道这是一个回答问题。
<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>