CSS – div always absolute middle left of screen even if page scroll

I want display a timer always absolute middle left of screen even if page scroll. (is it img on my draw)

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

                        line 8 

after scroll:

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

I try:

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

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

Answer

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

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

your idea is correct if needed you can try out all possible values to figure out which gives you the result.

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