Как вывести форму по центру экрана?

Question

[Евгений Ромашкан]

Собственно, есть форма редактирования товара/категории и т.п. После загрузки страницы она скрыта через v-if:visible(vue.js).
По нажатию на кнопку редактировать товар/категорию и т.п. нужно эту форму показать по центру экрана. Как можно реализовать подобное?
Сейчас сделано вот так:

.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 {
    ...
   }

Когда через vue visible становится равно true, пользователя перекидывает в верхнуюю часть страницы(если он уже перемотал колёсиком вниз). А нужно чтобы форма вывелось по центру экрана в любом месте страницы.

Answer 1

[BitRouter]

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)
//...
});

Comments

[BitRouter]

в указанном примере да

Answer 2

[Lumore]

https://codepen.io/anon/pen/GdQrdO