115

我正在尝试将 HTML 按钮准确地对齐在页面的中心，而不管使用的浏览器如何。它要么向左浮动，同时仍处于垂直中心，要么位于页面上的某个位置，如页面顶部等。

我希望它垂直和水平居中。这是我现在写的：

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>
4

9 回答 9

170

这是您的解决方案：JsFiddle

基本上，将您的按钮放入带有居中文本的 div 中：

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

具有以下样式：

.wrapper {
    text-align: center;
}

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

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

于 2012-08-03T15:56:43.650 回答
78

您可以通过简单的使用将 a 居中button而不使用text-align在父级上divmargin:auto; display:block;

例如：

HTML

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

CSS

button {
  margin:auto;
  display:block;
}

查看实际情况： CodePen

于 2015-09-26T00:00:54.193 回答
23

作者编辑：这是一个非常过时的答案！Flexbox 或网格要好得多。

我最近真的很喜欢display: table给东西一个固定的大小，比如可以margin: 0 auto工作。让我的生活轻松了很多。您只需要克服“表格”显示并不意味着表格 html 的事实。

它对于响应式设计特别有用，其中 50% 的事情变得毛茸茸和疯狂，而 -50% 的事情变得无法管理。

style
{
   display: table;
   margin: 0 auto
}

提琴手

此外，如果您有两个按钮并且您希望它们具有相同的宽度，您甚至不需要知道每个按钮的大小来使它们具有相同的宽度 - 因为表格会神奇地为您折叠它们。

在此处输入图像描述

提琴手

（如果它们是内联的并且您想将两个按钮并排居中，这也有效 - 尝试使用百分比来做到这一点！）。

于 2014-07-30T07:30:04.647 回答
10

试试这个，它很简单，你不能对你的 .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>
于 2012-08-03T16:20:28.150 回答
7

这是所要求的解决方案

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

于 2017-01-24T23:23:05.340 回答
6

有多种方法可以解决相同的问题。PFB他们两个-

第一种方式使用位置：固定- 位置：固定；相对于视口的位置，这意味着即使页面滚动，它也始终保持在同一个位置。将 left 和 top 值添加到 50% 会将其置于屏幕中间。

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

使用边距的第二种方式：auto -margin: 0 auto; 用于水平居中，但边距：自动；一直拒绝为垂直定心工作……直到现在！但实际上绝对居中只需要一个声明的高度和这些样式：

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
于 2018-07-25T03:33:26.250 回答
5

对我来说，它使用 flexbox 工作。

在父 div / 元素周围添加一个 css 类：

.parent {
    display: flex;
}

和按钮使用：

.button {
    justify-content: center;
}

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

于 2017-11-01T11:45:34.807 回答
1

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

于 2012-08-03T15:57:55.587 回答
0

使所有父元素具有 100% 宽度和 100% 高度并使用display: table; 并显示：表格单元格；，检查工作样本。

工作 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>
于 2019-02-11T09:28:12.243 回答