如何利用JavaScript和CSS将DIV元素定位在屏幕的正中央、左下角、左上角、右上角和右下角？

要使DIV始终居于屏幕中间、左下、左上、右上、右下，可以使用CSS的position属性和transform属性。以下是相应的代码：，，1. 居中：，``css，.center {， position: absolute;， top: 50%;， left: 50%;， transform: translate(-50%, -50%);，}，`，，2. 左下角：，`css，.bottom-left {， position: absolute;， bottom: 0;， left: 0;，}，`，，3. 左上角：，`css，.top-left {， position: absolute;， top: 0;， left: 0;，}，`，，4. 右上角：，`css，.top-right {， position: absolute;， top: 0;， right: 0;，}，`，，5. 右下角：，`css，.bottom-right {， position: absolute;， bottom: 0;， right: 0;，}，``使DIV始终居于屏幕中间、左下、左上、右上、右下的代码***

居中

CSS样式

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

HTML结构

<p class="center">我是居中的DIV</p>

左下

CSS样式

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

HTML结构

<p class="bottom-left">我是左下的DIV</p>

左上

CSS样式

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

HTML结构

<p class="top-left">我是左上的DIV</p>

右上

CSS样式

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

HTML结构

<p class="top-right">我是右上的DIV</p>

右下

CSS样式

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

HTML结构

<p class="bottom-right">我是右下的DIV</p>

相关问题与解答

1、问题： 如果我想让一个DIV在页面加载时自动居中，但是当用户滚动页面时保持固定位置不变，应该如何实现？

解答： 可以使用CSS的position: fixed属性来实现，该属性会将元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变，在上面给出的居中示例中，我们已经使用了这个属性，只需确保元素的top和left值设置为50%，然后使用transform: translate(-50%, -50%)来调整元素的实际位置，使其完全居中。

2、问题： 如果我想让一个DIV始终保持在屏幕的右下角，但是当用户缩小浏览器窗口时，它会自动移动到屏幕的中心而不是消失？

解答： 可以通过组合使用position: fixed和媒体查询（media query）来实现，设置元素的position为fixed并使其位于屏幕的右下角，使用媒体查询来检测窗口宽度，并在窗口宽度小于某个特定值时更改元素的position属性，使其居中显示。

   .bottom-right {       position: fixed;       bottom: 0;       right: 0;   }      @media screen and (max-width: 600px) {       .bottom-right {           position: static; /* 或者使用其他合适的定位方式 */           margin: auto; /* 或者其他居中样式 */       }   }

到此，以上就是小编对于“js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码***-ja”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。