Vue Js center an image (horizontally & vertically)

<html>

<body>
    <div id="app">
        <h3>Vue Js Center Image Horizontally & Vertically</h3>
        <div class="image-container">
            <img :src='url' width="350" alt="Your Image">
        </div>

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    url: "https://www.sarkarinaukriexams.com/images/post/1670771584desola-lanre-ologun-IgUR1iX0mqM-unsplash_(1).jpg"
                }
            },

})
    </script>
    <style scoped>
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            /* Set the height of the container to 100% of the viewport height */
            border: 1px solid
        }

img {
            max-width: 100%;
            /* Make sure the image doesn't exceed the width of its container */
            max-height: 100%;
            /* Make sure the image doesn't exceed the height of its container */
        }
    </style>

</body>

</html>