如何将输入按钮的位置更改为页面中心？答案

【问题标题】：how to change the postion of the enter button to the centre of the page?如何将输入按钮的位置更改为页面中心？
【发布时间】：2023-01-26 01:21:23
【问题描述】：

如何让按钮从顶部角落到页面中心

.button {
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
}

<a href="">
  <div class="button">enter</div>
</a>
<!--insert a link that take to a page that has info about the developers
    -->

我不知道该尝试什么？

【问题讨论】：

为什么你的按钮周围有一个空锚点？

标签： html css

【解决方案1】：

添加这个应该可以解决问题

    .button {
      display: block;
      margin: auto; }

【讨论】：

这样做的问题是按钮左侧和右侧的空白区域将是可点击的

【解决方案2】：

.button {
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}

<a href="">
  <div class="button">enter</div>
</a>
<!--insert a link that take to a page that has info about the developers
    -->

【讨论】：

【解决方案3】：

这将使您的按钮进入页面的中心。

.center{
  height : 100vh;
  width : 100vw;
  display : grid;
  align-items : center;
  justify-content : center;
}

<div class="center">
<button><a href="https://stackoverflow.com">Hi There</a></button>
</div>

【讨论】：

【解决方案4】：

你可以添加这个：

。按钮 {

  margin: auto;

}

或这个：

.button {
    margin-left:25%;
    margin-right:25%;
}

【讨论】：