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

封面图 • 2025-05-02 • JavaScript

要实现一个 `div` 始终相对于屏幕居中、左下、左上、右上、右下，可以通过 JavaScript 和 CSS 的组合来完成。以下是一个完整的解决方案：

### HTML 结构
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Div Positioning</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="box" class="center">居中</div>
  <button onclick="setPosition('center')">居中</button>
  <button onclick="setPosition('left-bottom')">左下</button>
  <button onclick="setPosition('left-top')">左上</button>
  <button onclick="setPosition('right-top')">右上</button>
  <button onclick="setPosition('right-bottom')">右下</button>

---

### CSS 样式 (`styles.css`)
```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}

.left-bottom,
.left-top,
.right-top,
.right-bottom {
  position: absolute;
}
```

---

### JavaScript 脚本 (`script.js`)
```javascript
function setPosition(position) {
  const box = document.getElementById('box');

// 清除之前的定位类
  box.classList.remove('left-bottom', 'left-top', 'right-top', 'right-bottom');

// 根据位置设置新的类
  box.classList.add(position);

// 动态调整位置
  if (position === 'left-bottom') {
    box.style.bottom = '10px';
    box.style.left = '10px';
  } else if (position === 'left-top') {
    box.style.top = '10px';
    box.style.left = '10px';
  } else if (position === 'right-top') {
    box.style.top = '10px';
    box.style.right = '10px';
  } else if (position === 'right-bottom') {
    box.style.bottom = '10px';
    box.style.right = '10px';
  } else {
    // 默认居中
    box.style.top = '50%';
    box.style.left = '50%';
    box.style.transform = 'translate(-50%, -50%)';
  }
}
```

---

### 解释
1. **HTML**:
   - 提供了一个按钮组，用于切换 `div` 的位置。
   - 每个按钮调用 `setPosition` 函数，并传递对应的位置参数。

2. **CSS**:
   - 设置了全局样式和 `#box` 的基础样式。
   - 定义了绝对定位的四个方向类（`left-bottom`, `left-top`, `right-top`, `right-bottom`），这些类将在 JavaScript 中动态应用。

3. **JavaScript**:
   - 清除之前的位置类，避免冲突。
   - 根据用户选择的位置，动态调整 `div` 的 `top`, `bottom`, `left`, `right` 属性。
   - 对于居中的情况，使用 `transform: translate(-50%, -50%)` 来实现精确居中。

---

### 效果
- 点击“居中”按钮时，`div` 会位于屏幕中心。
- 点击“左下”按钮时，`div` 会贴着屏幕左下角。
- 点击“左上”按钮时，`div` 会贴着屏幕左上角。
- 点击“右上”按钮时，`div` 会贴着屏幕右上角。
- 点击“右下”按钮时，`div` 会贴着屏幕右下角。

这种方案既灵活又易于扩展，适用于多种场景。

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

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