Vue Js center an image (horizontally & vertically)

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Center Image Horizontally & Vertically</h3>
        <div class="image-container">
            <img :src="url" alt="Your Image">
        </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    url: 'https://www.sarkarinaukriexams.com/images/post/1670772103thisisengineering-raeng-yhCHx8Mc-Kc-unsplash_(1).jpg'
                }
            },

})
    </script>
    <style scoped>
        .image-container {
            position: relative;
            /* Set the position of the container to relative */
            height: 500px;
            background-color: #eee;
        }

img {
            position: absolute;
            /* Set the position of the element to absolute */
            top: 50%;
            /* Position the element 50% from the top of its closest positioned ancestor */
            left: 50%;
            /* Position the element 50% from the left of its closest positioned ancestor */
            transform: translate(-50%, -50%);
            /* Center the element horizontally and vertically */
            width: 350px
        }
    </style>
</body>
</html>