我在 div 元素位置有问题

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 元素位置有问题

I have a problem in a div element position

css

position

css-position