[Vuejs]-How to center an image in vue.js?

by

1👍

Have you tried using display:flex; together with justify-content:center;?
You can also try out using position:absolute;

You can read more about image-centering methods here: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

👤Raxxoht

0👍

#container3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

you can put those css codes to the parent div

👤Can Ozdemir

0👍

#container3 {
    display: flex;
    width:100%;
    height:500px; 
    justify-content: center;
    align-items: center;
}

Flexbox is the most suitable solution for your problem.
The parent (#container3) should be a flex container. For horizontal centering we use justify-content: center & for vertical centering we use align-items: center.

Note: We must provide height to the parent for child to align in vertical direction. Also the above example is for default flex-direction ( row). For more details refer to the page https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox

👤Nilesh Yadav

Leave a comment