Как сделать чтобы элемент с position: fixed; масштабировался по центру со всеми элементами?

Question

[calamandor]

Можно ли сделать это через js?

<div id="wrappers" class="wrappers">
        <div class="container1">
        <div id="place_screen">
            <div class="background_imgs">
                <img src="imgs_screen\img_primorie1.png">
                <img src="imgs_screen\img_primorie2.png">
                <img src="imgs_screen\img_primorie3.png">
                <img src="imgs_screen\img_primorie4.png">
                <img src="imgs_screen\img_primorie5.png">
                <img src="imgs_screen\img_primorie6.png">
                <img src="imgs_screen\img_primorie7.png">
                <img src="imgs_screen\img_primorie8.png">


            </div>
            <div class="name_hotel">ПРИМОРЬЕ GRAND RESORT HOTEL
            </div>
        </div>

#place_screen {
       
        position: fixed;
        top: 100px;
        left: 100px;
        width: calc(100% - 200px);
        height: calc(100% - 200px);
        background-color: #fff;
        z-index: 1000;
        display: none;
        overflow-y: scroll;
    
}
#place_screen.hide {
    opacity: 1;
    display: block;
    
}
.wrappers {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

[LAVladis]

.wrappers {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#place_screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 200px);
    height: calc(100% - 200px);
    background-color: #fff;
    z-index: 1000;
    display: none;
    overflow-y: scroll;
}

#place_screen.hide {
    opacity: 1;
    display: block;
}