如何在中心对齐此DIV，以使其在所有设备上都有响应

Question

我正在制作一个投资组合网站，并且想要在页面中间有这个小徽标，但它没有响应。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  margin: 0;
  padding: 0;
}
.box1 {
  position: absolute;
  margin: 0 auto;
  i think i'm messing up here
 width: 90px;
  height: 100px;
  background: rgb(31, 31, 31);
  float: left;
  text-align: center;
}
.box1 a {
  position: relative;
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  color: #fff;
  top: 50%;
}
.box1 a:hover {
  color: rgb(241, 241, 241);
}

<div class="container">
  <nav>
    <div class="box1"><a href="#">Top</a></div>
  </nav>
</div>

期望

我希望文本与盒子对齐，并在页面中心的底部和整个Div中有一些空间，这也将充当主页按钮。建议/反馈将不胜感激

Answer 1

只需添加

 top:50%;
   left:50%;
   transform: translate(-50%, -50%);

到您的position:absolute中心。请记住，绝对仅适用于定义的父母。

* {
    margin: 0;
    padding: 0;
  }
html, body { 
    margin: 0;
    padding: 0;
}
    .box1 { 
       position: absolute;
       margin: 0 auto;
       top:50%;
       left:50%;
       transform: translate(-50%, -50%);
       
       width: 90px;
       height: 100px;
       background: rgb(31, 31, 31);
       float: left; 
       text-align: center;
  }
  .box1 a { 
      position: relative;
      font-family: 'Roboto Slab',sans-serif;
      font-weight: 700;
      font-size: 22px;
      text-decoration: none;
      color: #fff;
      top: 50%;            
  }
  .box1 a:hover { 
      color: rgb(241, 241, 241);   
  }

<div class="container">
     <nav> 
         <div class="box1"><a href="#">Top</a></div>
     </nav>
</div>