试图alignment我的网页中心的HTMLbutton
我试图调整一个HTMLbutton完全在页面的中心，无论使用的浏览器。 它或者是浮动到左边，而仍然在垂直中心或在页面上的某处，如页面顶部等。我希望它是垂直和水平居中。 这是我现在写的：
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button> 这是你的解决scheme： http : //jsfiddle.net/7Laf8/
基本上，把你的button放在一个中心文本的div：
<div class="wrapper"> <button class="button">Button</button> </div>
使用以下样式：
.wrapper { text-align: center; } .button { position: absolute; top: 50%; }
皮肤有很多种方法去皮肤，这只是一个。
你可以通过简单的使用margin:auto; display:block;你可以居中一个button而不使用text-align父div margin:auto; display:block; margin:auto; display:block;
例如：
HTML
<div> <button>Submit</button> </div>
CSS
button{ margin:auto; display:block; }
看到它的行动： http : //codepen.io/maudulus/pen/avBdpL
我最近真的采取display: table给东西一个固定的大小，如启用margin: 0 auto工作。 让我的生活变得更轻松 你只需要通过'table'显示不意味着table html的事实。
这对于响应式devise尤为有用，在这种devise中，只有50％的东西变得毛茸茸的和疯狂的，而50％的变得难以pipe理。
style { display: table; margin: 0 auto }
另外，如果你有两个button，并且你希望它们有相同的宽度，那么你甚至不需要知道每个button的大小，以使它们成为相同的宽度，因为表格会为你魔法折叠它们。
（如果它们是内联的，并且你想把两个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>
这是问题的解决scheme
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
将它放在另一个div中，使用CSS将button移动到中间：
<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>
这是一个例子： http : //jsfiddle.net/U2B3x/
对我来说，它使用flexbox。
在父div /元素周围添加一个css类：
.parent { display: flex; }
并为button使用：
.button { justify-content: center; }
你应该使用一个父div，否则button不知道页面/元素的中间是什么。
