时间戳

首页 > 解决方案 > CSS - 即使页面滚动，div 也始终位于屏幕的绝对中间左侧

html - CSS - 即使页面滚动，div 也始终位于屏幕的绝对中间左侧

问题描述

即使页面滚动，我也想在屏幕的绝对中间显示一个计时器。（是我画的img吗）

+---------------------------------------------------------------+
|                                                             | |
|   ^                                                         | |
|  50%                  line 1                                | |
|                                                             | |
|                       line 2                                | |
|-----+                                                       | |
| img |                 line 3                                | |
|-----+                                                       | |
|                       line 4                                | |
|                                                             | |
|                       line 5                                | |
|  50%                                                        | |
|                       line 6                                | |
|                                                             |>|
+---------------------------------------------------------------+
                        line 7

                        line 8

滚动后：

                        line 1
+---------------------------------------------------------------+
|                       line 2                                | |
|   ^                                                         | |
|  50%                  line 3                                | |
|                                                             | |
|                       line 4                                | |
|-----+                                                       | |
| img |                 line 5                                | |
|-----+                                                       | |
|                       line 6                                | |
|                                                             | |
|                       line 7                                | |
|  50%                                                        | |
|                       line 8                                | |
|                                                             |>|
+---------------------------------------------------------------+

我尝试：

<div class="timer">
  <p>img</p>
</div>

.timer {
  /* ... */
  position: absolute;
  top: 50%;
  left: 0px;
}

标签： htmlcss

解决方案

.timer {
  position: fixed;
  top: 50%;
  left: 0px;
  transform: translateY(-50%)
}

具有位置的元素：固定；相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

如果需要，您的想法是正确的，您可以尝试所有可能的值来找出哪个给您结果。

https://www.w3schools.com/css/css_positioning.asp

推荐阅读