Nested demo

Demo settings:

<div id="parentEle" style="height: 400px; width: 500px; border: 3px solid white; overflow: scroll; position: relative; left: 100vw;">
    <div style="height: 100vh; width: 2000px;"></div>
    <div style="height: 200px; width: 200px; position: relative; left: 1000px;">
        <div style="position: absolute; width: 200px; height: 200px; border: 3px solid white;"></div>
        <div
            id="yaslObj"
            style="height: 200px; width: 200px; background-color: blue;"
            data-yasl
            data-yasl-exec-counter="-1"
            data-yasl-fallback="true"
            data-yasl-parent="#parentElement"
            data-yasl-revert="true"
            data-yasl-css=""
            data-yasl-animations="fade"
            data-yasl-axis="both"
        >
            <div style="width: 2px; height: 100%; background-color: white; position: absolute; left: calc(50% - 1px);"></div>
            <div style="width: 100%; height: 2px; background-color: white; position: absolute; top: calc(50% - 1px);"></div>
        </div>
    </div>
    <div style="height: 100vh; width: 2000px;"></div>
</div>

Scroll down to the line and then to the right.

Scroll to the vertical and horizontal center of the parent element.