html - 如何将此 div 居中对齐，以便它在所有设备上都能响应

Question

我正在制作一个投资组合网站，并希望在页面中间有这个小 Logo ，但它没有响应。

* {
  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>