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

Question

无论使用何种浏览器,我都试图将HTML按钮完全对齐在页面的中心.它可以浮动到左边,同时仍然位于垂直中心,或者位于页面上的某个位置,如页面顶部等.

我希望它可以垂直和水平居中.这是我现在写的:

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

Answer 1

这是你的解决方案:JsFiddle

基本上,将按钮放入具有居中文本的div中:

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

具有以下样式:

.wrapper {
    text-align: center;
}

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

皮肤猫的方法有很多,而这只是一种.

Answer 2

通过简单的使用,您可以在不使用text-align父项div的情况下居中按钮margin:auto; display:block;

例如:

HTML

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

CSS

button {
  margin:auto;
  display:block;
}

看看它的行动:CodePen

Answer 3

我最近真的采取了display: table一些固定的尺寸,以便margin: 0 auto能够工作.让我的生活变得更轻松.你只需要了解'table'显示并不意味着表html的事实.

它对于响应式设计特别有用,其中事情变得毛茸茸和疯狂50%离开这个,而-50%变得难以管理.

style
{
   display: table;
   margin: 0 auto
}

的jsfiddle

另外,如果你有两个按钮并且你想要它们的宽度相同,你甚至不需要知道每个按钮的大小,以使它们具有相同的宽度 - 因为桌子会为你神奇地折叠它们.

的jsfiddle

(如果它们是内联的,并且您希望将两个按钮并排放在一边 - 这样也可以使用百分比!).

Answer 4

这是所问的解决方案

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

Answer 5

试试这个很简单，让您无法更改.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>

Answer 6

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

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

.parent {
    display: flex;
}

和按钮使用：

.button {
    justify-content: center;
}

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

Answer 7

有多种方法可以修复相同的问题。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;
}