Question

我正在尝试将div元素响应地放置在中心，但是左上角按我的意愿工作（它居中而不是整个div）该怎么办？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
  <div class="container"></div>
  <input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()"></button>
  <p id="text"></p>
    <script type="text/javascript" src="js/javascript.js"></script>
  </body>
</html>

body {
  background-color: rgba(75, 75, 75, 0.7); }

.container {
  background-color: white;
  height: 360px;
  width: 640px;
  position: absolute;
  top: 50%;
  left: 50%; 
}

Answer 1

使用translate（-50％，-50％），它将在Y和X轴上移动到其高度和宽度的50％。

body {
  background-color: rgba(75, 75, 75, 0.7);
}

.container {
  background-color: white;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); /** add this **/
}

<!DOCTYPE html>
<html>
<body>
  <div class="container"></div>
  <input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()">
  <p id="text"></p>
  <script type="text/javascript" src="js/javascript.js"></script>
  </body>
  </html>

我在div元素位置有问题

1 个答案: