How do you center a text or object VERTICALLY using CSS/HTML?

Question

Do you know of a quick simple solution?

I have both paragraph and an image inside two separate div (container). How can I centralize the p and img VERTICALLY within the container such that it will stay in the middle even if on a wider screen. (Responsive)

Answer 1

In CSS :
. container {
width: 500px;
height: 300px;
display: flex;
/* center horizontally */
justify-content: center;
/* vertically */
align-items: center;
}

Answer 2

Thanks Djo Djo .

This lines saved me:

display:flex;
align-items:center;

Appreciated!

Answer 3

Go into your css.
body {
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}

Answer 4

Jeez. Wish I'd known about 'display:flex;' 7 years ago. Could have saved myself some brain damage, writing unnecessary tables just to center content. Now I know. Thanks.