我想正好在使用的浏览器页面，不论中心对齐的HTML按钮。它要么浮动到左侧，同时仍然在垂直中心或类似页面等顶部的页面上能在别处..
我希望它是垂直和水平居中。以下是我已经写了现在：
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
这里是您的解决方案：JsFiddle
基本上，把你的按钮与文字居中一个div：
<div class="wrapper">
<button class="button">Button</button>
</div>
随着以下样式：
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
有很多方法对皮肤一只猫，而这仅仅是一个。
您可以通过使用text-align简单中心的按钮，而无需使用div父margin:auto; display:block;
例如：
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
看到它在行动：CodePen
我真的采取最近display: table给事情一个固定的大小，如使margin: 0 auto工作。使我的生活轻松了许多。你只需要得到过去的事实，“表”显示，并不意味着表HTML。
这对于响应式设计在事情刚刚得到毛茸茸的和疯狂的50％，离开了这个和-50％，只是变得无法控制特别有用。
style
{
display: table;
margin: 0 auto
}
此外，如果你有两个按钮，你想他们，你甚至不需要知道每一个的大小，让他们具有相同的宽度相同的宽度 - 因为表会奇迹般地崩溃它们。
（这也适用，如果他们是内联和要居中两个按钮，一边到另一边 - 尝试做与百分比！）。
试试这个是很简单的，给您不能更改您的.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>
这里是解决方案要求
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>对我来说，它的工作使用Flexbox的。
添加CSS类的父DIV /元素周围：
.parent {
display: flex;
}
和按钮使用：
.button {
justify-content: center;
}
您应该使用父DIV，否则按钮不会“知道”的页面/元素的中间是什么。
有多种方法可以解决一样。他们的PFB 2 -
第一方式使用位置是：固定 - 位置是：固定;相对于视，这意味着它总是停留在即使滚动页面时相同的地方位置。添加左侧和顶部值50％将其放置到屏幕的中间。
button {
position: fixed;
left: 50%;
top:50%;
}
使用第二路缘：汽车-margin：0汽车;对于水平居中，但保证金：汽车;已拒绝为垂直居中工作...到现在为止！但实际上绝对中心只需要声明的高度，这些样式：
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
把它放在另一个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
使用100％的宽度和100％的高度和使用显示所有父元素：表;并显示：表小区;,检查工作样品。
<!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>