How would I center all the items in a div?

Hello everyone,
I was wondering how I could vertically center items in a div such as: image, h1, and text.

Here is a photo showcasing the idea I’m think off >>>>>

Any suggestions?
Thank you in advance!

Hi there Liamgrossman,

check out the attachment which contains a possible solution.

Liamgrossman.zip (9.6 KB)

coothead

Hi,

I guess with vertically you mean center the items in a column?

You could use flex-box:

.divcenter {
  display: flex;
  flex-direction: column;  /* default: row */
  justify-content: center;  /* direction-wise */
  align-items: center;  /* cross direction */
}

Please study this “Flexbox Patterns” demo for a multiple of flexbox use cases by @PaulOB:
codepen.io/paulobrien/full/xVNMRZ/

1 Like

Thank you very much @Erik_J

1 Like