我的 div 元素位置有问题答案

【问题标题】：I have a problem in a div element position我的 div 元素位置有问题
【发布时间】：2019-05-26 21:04:22
【问题描述】：

我试图将 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%; 
}

【问题讨论】：

标签： css position css-position

【解决方案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>

【讨论】：