How to manipulate Divs with different CSS rules?

Question

I’m creating a working time alert with scroll for tablets and mobile phones, based on the Spinning Wheel project, found in https://github.com/mcfedr/Spinning-Wheel/blob/master/index.html

The problem, is that in my project, the alert should appear in the middle of the screen, and in the original project, several elements are under various different CSS rules (Divs like #sw-wrapper ,#sw-slots , #sw-frame, etc). I can even put some Divs in the middle of the screen, but they are all misaligned. And even lose the functionality of the scroll. I’ve also tried to put all the elements inside a div, but it didn’t work.

Is there any concept of CSS that I haven’t assimilated? Is there a smart way to solve this?

Some modifications I made to the code to try this

In body CSS I put (to try to take all Divs)

alarm

            {
                position: fixed;
                top: 50%;
            }

in the Divs I tried to use a

{ position: absolute;
  bottom:  50%;
}

In javascript, where to find:

div.innerHTML = '<div id="sw-header"><div id="sw-cancel">....</div>

I tried to force a DIV of mine with:

div.innerHTML = '<div id="alarme"><div id="sw-header"><div id="sw-cancel">....</div>

Answer 1

Slow option - > Unlock all code until the Javascript functionality that influences the CSS is exposed.

Changing each function, attribute and even CSS properties. It is an exhaustion method. Not always possible to apply, because it requires dedication to exterm.

Option not so obvious, and sometimes faster -> Rebuild from scratch, functionality.

It’s not because you found a super cool script, which means you can’t play part of the functionality, or in some cases, even the entire algorithm with even different code. In my case, I played the touch part in JS using jquery.mobile-1’s Swipe function. 4.5 : http://jsfiddle.net/Q3d9H/1/

To be able to scroll the "clock" number up and down, use Jquery’s Animate function: http://api.jquery.com/animate/

Answer 2

depends a lot on the properties of the CSS applied in the project, it may be that they do not fit in a new structure, but to try to accommodate it in a fixed container with flex-box, example...

.CtnPrinc {
  height: 90vh;
  width: 90%;
  border: 1px black solid;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
}
.meio{
  width: 200px;
  height: 100px;
  overflow: scroll;
  border: 1px black solid;
  text-align: center;
}

<div class="CtnPrinc">
  <div class="meio">
    
     teste<br>
     teste<br>
     teste<br>
     teste<br>
     teste<br>
     teste<br>
     teste<br>
    
  </div>
</div>