我正在尝试将 HTML 按钮准确地对齐在页面的中心，而与使用的浏览器无关。它要么向左浮动，同时仍处于垂直中心，要么位于页面上的某个位置，如页面顶部等。
我希望它垂直和水平居中。这是我现在写的：
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
【问题讨论】：
标签： html css button alignment vertical-alignment
作者编辑：这是一个非常过时的答案！ Flexbox 或网格要好得多。
我最近真的很喜欢 display: table 给东西一个固定的大小，比如让 margin: 0 auto 工作。让我的生活轻松了很多。您只需要克服“表格”显示并不意味着表格 html 的事实。
这对于响应式设计特别有用，其中 50% 的事情会变得棘手和疯狂，而 -50% 的事情会变得无法管理。
style
{
display: table;
margin: 0 auto
}
此外，如果您有两个按钮并且您希望它们具有相同的宽度，您甚至不需要知道每个按钮的大小来使它们具有相同的宽度 - 因为表格会神奇地为您折叠它们。
（如果它们是内联的并且您想将两个按钮并排居中，这也可以使用 - 尝试使用百分比！）。
【讨论】：
您可以在不使用 text-align 的情况下将 button 居中在父 div 上，只需使用 margin:auto; display:block;
例如：
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
查看实际情况： CodePen
【讨论】：
使所有父元素具有 100% 宽度和 100% 高度并使用 display: table; 和 display:table-cell;，检查工作示例。 p>
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<button type="button" style="text-align: center;" class="btn btn-info">
Discover More
</button>
</div>
</body>
</html>
【讨论】：
将它放在另一个div中，使用CSS将按钮移动到中间：
<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button>
</div>
这里是一个例子：JsFiddle
【讨论】：
这是您的解决方案：JsFiddle
基本上，将您的按钮放置在文本居中的 div 中：
<div class="wrapper">
<button class="button">Button</button>
</div>
具有以下样式：
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
给猫剥皮的方法有很多种，这只是其中一种。
【讨论】：
button 元素居中。唯一的方法是使用body 作为包装器。这意味着一切都以中心为中心。如果您想要非居中元素，则必须为这些元素提供包装器元素。我认为额外的 div 并不比为导航和其他会受到影响的其他页面元素应用自定义规则更糟糕。
有多种方法可以解决相同的问题。两个PFB——
第一种使用位置的方式：固定 - 位置：固定；相对于视口的位置，这意味着即使页面滚动，它也始终保持在同一个位置。将 left 和 top 值添加到 50% 会将其置于屏幕中间。
button {
position: fixed;
left: 50%;
top:50%;
}
使用边距的第二种方式：自动 -margin: 0 auto;用于水平居中，但边距：自动；一直拒绝为垂直定心工作……直到现在！但实际上绝对居中只需要声明的高度和这些样式：
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
【讨论】：
对我来说，它使用 flexbox 工作。
在父 div / 元素周围添加一个 css 类：
.parent {
display: flex;
}
对于按钮的使用：
.button {
justify-content: center;
}
您应该使用父 div，否则按钮不“知道”页面/元素的中间是什么。
【讨论】：
这是所要求的解决方案
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>【讨论】：
试试这个，它很简单，你不能对你的 .css 文件进行更改，这应该可以工作
<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
【讨论】：