How would I center all the items in a div?

[Liamgrossman]

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 >>>>>

Capture.PNG

Any suggestions?
Thank you in advance!

[coothead]

Hi there Liamgrossman,

check out the attachment which contains a possible solution.

Liamgrossman.zip (9.6 KB)

coothead

[Erik_J]

@Liamgrossman

vertically center items in a div such as: image, h1, and text.

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/

[Liamgrossman]

Thank you very much @Erik_J