试图在我的页面中心对齐 html 按钮

我试图在页面的中心精确地对齐一个 HTML 按钮，而不管使用的是什么浏览器。它要么漂浮在左边，而仍然在垂直中心或在页面上的某个地方，如在页面的顶部等。.

我希望它在垂直和水平两个方向都居中，下面是我现在写的:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
1012861 次浏览
小开
最佳答案

Here's your solution: JsFiddle

基本上，把你的按钮放在一个以文本为中心的 div 中:

<div class="wrapper">
<button class="button">Button</button>
</div>

风格如下:

.wrapper {
text-align: center;
}


.button {
position: absolute;
top: 50%;
}

剥猫皮的方法有很多，这只是其中之一。

小开

将它放在另一个 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

小开

尝试这是非常简单的，并给你不能改变你的.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>
小开

编辑由作者: 这是一个真正过时的答案! Flexbox 或网格更好。

我最近真的采取了 display: table给事物一个固定的大小，如使 margin: 0 auto工作。让我的生活轻松了很多。您只需要忽略“表”显示并不意味着表 html 这一事实。

这是特别有用的响应设计，事情只是变得毛骨悚然和疯狂的50% 离开这个和 -50% ，只是变得难以管理。

style
{
display: table;
margin: 0 auto
}

JsFiddle

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.

enter image description here

JsFiddle

(如果它们是内联的，并且您希望将两个按钮从一边到另一边居中，那么也可以这样做——试着使用百分比!).

小开

通过简单地使用 margin:auto; display:block;，您可以在父 div上不使用 text-align而将 button居中

例如:

超文本标示语言

<div>
<button>Submit</button>
</div>

CSS

button {
margin:auto;
display:block;
}

看看它的实际效果: CodePen

小开

这是我们要求的解决方案

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

小开

对我来说，使用 Flexbox 就可以了。

在父 div/element 周围添加一个 css 类，使用:

.parent {
display: flex;
}

以及按钮的使用:

.button {
justify-content: center;
}

您应该使用父 div，否则按钮不会“知道”页面/元素的中间是什么。

小开

有很多方法可以解决同样的问题

第一种方法使用 position: fix -position: fix; 相对于 viewport 的位置，这意味着即使页面被滚动，它始终保持在相同的位置。将左边和顶部的值添加到50% 将把它放在屏幕的中间。

 button {
position: fixed;
left: 50%;
top:50%;
}

第二种方式使用页边距: auto -页边距: 0 auto; 用于水平居中，但页边距: auto; 一直拒绝用于垂直居中... 直到现在！但实际上，绝对居中只需要一个声明的高度和这些样式:

button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
小开

制作所有100% 宽度和100% 高度的母元件，使用 展示: 桌子;和 显示: 表格单元格;，检查工作样品。

工作 Git 版本

<!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>

提交答案