js+css使DIV始终居于屏幕中间左下左上右上右下

封面图 • 2025-12-15 • JavaScript

你可以使用 JavaScript 和 CSS 来实现一个 `div` 在屏幕的**左上、右上、左下、右下**四个角落居中显示。不过你提到“始终居于屏幕中间”，但又说“左上、左下、右上、右下”，这可能有歧义。

如果你是想让一个 `div` **在不同位置（左上、右上、左下、右下）之间切换**，或者是在**某个固定的位置（如左上）始终居中显示**，那么我们可以分情况处理。

---

### ✅ 场景一：让一个 `div` 始终居于屏幕的 **左上角**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Div in Top Left</title>
  <style>
    #myDiv {
      position: fixed;
      top: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: lightblue;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>

</body>
</html>
```

---

### ✅ 场景二：让一个 `div` 始终居于屏幕的 **右上角**

```css
#myDiv {
  position: fixed;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  padding: 10px;
  box-sizing: border-box;
}
```

---

### ✅ 场景三：让一个 `div` 始终居于屏幕的 **左下角**

```css
#myDiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  padding: 10px;
  box-sizing: border-box;
}
```

---

### ✅ 场景四：让一个 `div` 始终居于屏幕的 **右下角**

```css
#myDiv {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: lightskyblue;
  padding: 10px;
  box-sizing: border-box;
}
```

---

### ✅ 场景五：通过 JS 动态设置位置（比如点击按钮切换）

如果你想用 JavaScript 来动态控制这个 `div` 的位置，可以这样做：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Div Position</title>
  <style>
    #myDiv {
      position: fixed;
      width: 200px;
      height: 100px;
      padding: 10px;
      box-sizing: border-box;
      background-color: lightgray;
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div id="myDiv">Position</div>

<button onclick="setTopLeft()">Top Left</button>
<button onclick="setTopRight()">Top Right</button>
<button onclick="setBottomLeft()">Bottom Left</button>
<button onclick="setBottomRight()">Bottom Right</button>

function setTopRight() {
    const div = document.getElementById('myDiv');
    div.style.top = '0';
    div.style.right = '0';
    div.style.left = 'auto';
    div.style.bottom = 'auto';
    div.style.backgroundColor = 'lightgreen';
  }

function setBottomLeft() {
    const div = document.getElementById('myDiv');
    div.style.bottom = '0';
    div.style.left = '0';
    div.style.top = 'auto';
    div.style.right = 'auto';
    div.style.backgroundColor = 'lightcoral';
  }

function setBottomRight() {
    const div = document.getElementById('myDiv');
    div.style.bottom = '0';
    div.style.right = '0';
    div.style.top = 'auto';
    div.style.left = 'auto';
    div.style.backgroundColor = 'lightskyblue';
  }
</script>

</body>
</html>
```

---

### 总结

- 使用 `position: fixed` 可以让元素相对于浏览器窗口定位。
- 通过设置 `top`, `bottom`, `left`, `right` 属性来控制位置。
- 如果需要动态切换位置，可以用 JavaScript 控制样式属性。

如果你还有其他需求（比如响应式布局、居中动画等），也可以告诉我，我可以进一步优化。

js+css使DIV始终居于屏幕中间 左下 左上 右上 右下

js+css使DIV始终居于屏幕中间左下左上右上右下