js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合

让我来详细地讲解一下“js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合”的完整攻略。

一、使DIV始终居于屏幕中间

实现方法

<div class="center">
  <p>元素始终居于屏幕中央</p>
</div>

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

说明

这里使用了CSS3的transform属性，将元素向上移动了50%，同时向左移动了50%，实现了在水平方向和垂直方向居中的效果。

二、使DIV始终居于屏幕左下角

实现方法

<div class="bottom-left">
  <p>元素始终居于屏幕左下角</p>
</div>

.bottom-left {
  position: fixed;
  bottom: 0;
  left: 0;
}

说明

这里设置了元素的定位方式为fixed，即相对于浏览器窗口定位，然后将元素的底部和左侧与浏览器窗口的底部和左侧对齐。

三、使DIV始终居于屏幕左上角

实现方法

<div class="top-left">
  <p>元素始终居于屏幕左上角</p>
</div>

.top-left {
  position: fixed;
  top: 0;
  left: 0;
}

说明

这里设置了元素的定位方式为fixed，即相对于浏览器窗口定位，然后将元素的顶部和左侧与浏览器窗口的顶部和左侧对齐。

四、使DIV始终居于屏幕右上角

实现方法

<div class="top-right">
  <p>元素始终居于屏幕右上角</p>
</div>

.top-right {
  position: fixed;
  top: 0;
  right: 0;
}

说明

这里设置了元素的定位方式为fixed，即相对于浏览器窗口定位，然后将元素的顶部和右侧与浏览器窗口的顶部和右侧对齐。

五、使DIV始终居于屏幕右下角

实现方法

<div class="bottom-right">
  <p>元素始终居于屏幕右下角</p>
</div>

.bottom-right {
  position: fixed;
  bottom: 0;
  right: 0;
}

说明

这里设置了元素的定位方式为fixed，即相对于浏览器窗口定位，然后将元素的底部和右侧与浏览器窗口的底部和右侧对齐。

以上就是“js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合”的完整攻略。希望能对你有所帮助。