如何将此 div 居中对齐，使其在所有设备上都能响应答案

【问题标题】：How to align this div in the center so that it is responsive on all devices如何将此 div 居中对齐，使其在所有设备上都能响应
【发布时间】：2019-10-07 05:16:37
【问题描述】：

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

* {
  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，这也可以用作主页按钮。也将不胜感激建议/反馈

【问题讨论】：

标签： html css alignment centering

【解决方案1】：

只需添加

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

到您的position:absolute 以居中。请记住 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>

【讨论】：