试图在我的页面中心对齐 html 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11799159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trying to align html button at the center of the my page
提问by user1455116
I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc..
无论使用哪种浏览器，我都试图将 HTML 按钮准确地对齐到页面的中心。它要么向左浮动，同时仍处于垂直中心，要么在页面上的某个地方，如页面顶部等。
I want it to be both vertically and horizontally be centered. Here is what I have written right now:
我希望它既垂直又水平居中。这是我现在写的：
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
回答by Mohamad
Here's your solution: JsFiddle
这是您的解决方案：JsFiddle
Basically, place your button into a div with centred text:
基本上，将您的按钮放入带有居中文本的 div 中：
<div class="wrapper">
<button class="button">Button</button>
</div>
With the following styles:
具有以下样式：
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
There are many ways to skin a cat, and this is just one.
给猫剥皮的方法有很多种，这只是其中一种。
回答by maudulus
You can center a button without using text-alignon the parent divby simple using margin:auto; display:block;
您可以通过简单的使用将按钮居中，而无需text-align在父级上div使用margin:auto; display:block;
For example:
例如：
HTML
HTML
<div>
<button>Submit</button>
</div>
CSS
CSS
button {
margin:auto;
display:block;
}
SEE IT IN ACTION:CodePen
回答by Simon_Weaver
I've really taken recently to display: tableto give things a fixed size such as to enable margin: 0 autoto work. Has made my life a lot easier. You just need to get past the fact that 'table' display doesn't mean table html.
我最近真的很喜欢display: table给东西一个固定的大小，例如使其margin: 0 auto能够工作。让我的生活轻松了很多。您只需要克服“表格”显示并不意味着表格 html 的事实。
It's especially useful for responsive design where things just get hairy and crazy 50% left this and -50% that just become unmanageable.
它对于响应式设计特别有用，其中 50% 的事情变得毛茸茸和疯狂，而 -50% 的事情变得无法管理。
style
{
display: table;
margin: 0 auto
}
In addition if you've got two buttons and you want them the same width you don't even need to know the size of each to get them to be the same width - because the table will magically collapse them for you.
此外，如果您有两个按钮并且希望它们具有相同的宽度，您甚至不需要知道每个按钮的大小即可使它们具有相同的宽度 - 因为表格会神奇地为您折叠它们。
(this also works if they're inline and you want to center two buttons side to side - try doing that with percentages!).
（如果它们是内联的，并且您想将两个按钮并排居中，这也有效 - 尝试使用百分比来做到这一点！）。
回答by joy oares
Here is the solution as asked
这是所问的解决方案
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>回答by Rick Roy
try this it is quite simple and give you cant make changes to your .css file this should work
试试这个，它很简单，你不能对你的 .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>
回答by Roy
For me it worked using flexbox.
对我来说，它使用 flexbox 工作。
Add a css class around the parent div / element with :
在父 div / 元素周围添加一个 css 类：
.parent {
display: flex;
}
and for the button use:
和按钮使用：
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
您应该使用父 div，否则按钮不会“知道”页面/元素的中间是什么。
回答by Maddy
There are multiple ways to fix the same. PFB two of them -
有多种方法可以修复相同的问题。PFB 其中两个——
1st Way using position: fixed- position: fixed; positions relative to the viewport, which means it always stays in the same place even if the page is scrolled. Adding the left and top value to 50% will place it into the middle of the screen.
第一种使用位置：固定- 位置：固定；相对于视口的位置，这意味着即使页面滚动它也始终保持在同一位置。将 left 和 top 值添加到 50% 会将其置于屏幕中间。
button {
position: fixed;
left: 50%;
top:50%;
}
2nd Way using margin: auto-margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually absolute centering only requires a declared height and these styles:
第二种使用保证金的方式：auto-margin: 0 auto; 用于水平居中，但边距：自动；一直拒绝为垂直居中工作……直到现在！但实际上绝对居中只需要声明高度和这些样式：
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
回答by Tim Withers
Place it inside another div, use CSS to move the button to the middle:
将它放在另一个 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>?
Here is an example: JsFiddle
这是一个例子：JsFiddle
回答by Ritesh Kumar
Make all parent element with 100% width and 100% height and use display: table;and display:table-cell;, check the working sample.
使所有父元素具有 100% 的宽度和 100% 的高度并使用display: table; 并显示：表格单元格；，检查工作样本。
<!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>
