How to display the form in the center of the screen?

Question

css

Actually, there is a form for editing a product/category, etc. Once the page is loaded, it is hidden via v-if:visible(vue.js).
By clicking on the button to edit a product/category, etc. you need to show this form in the center of the screen. How can such a thing be implemented?
Now done like this:

.background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    overflow: auto;
    .center {
    ...
   }

When visible becomes true through vue, the user is thrown to the top of the page (if he has already scrolled down with the wheel). And you need the form to be displayed in the center of the screen anywhere on the page.

Answer 1

css

.myclass {
    position:fixed;
    width:400px;
    height:200px;
    margin-left:-200px;
    margin-top:-100px; 
    left:50%;
    top:50%;
}

JS

var widthDevice = $(window).width(),
      heightDevice = $(window).height();
var widthMain = $('.myclass').width(),
      heightMain = $('.myclass').height();
$('.myclass').css({
  'left': widthDevice - (widthMain  / 2)
//...
});