Hello - centering content in CSS can be tricky (vertical centering is notoriously tedious).
A relatively easy way to address this problem is to use flexbox. Flexbox allows you to specify on a container how you want the child elements to behave.
I drew up a fiddle for you here with some comments. As you can see its pretty simple to center a div horizontally and vertically inside of another one: check it out
In you profile it looks like you are trying to have four images line up to make a square. Again, this is a great task to handle with flexbox. I’ve created a similar layout for you here: check it out
I didn’t include comments on this one because you should read about flexbox and figure out how it is working on your own so you can really learn it. Notice the css for the pink div tells the blue div how to behave. And the Css for the blue div tells the yellow divs how to behave.
Also in general try to think of elements on a webpage in terms of parent and child containers. Once you understand what the parent and it’s children should look like, building layouts becomes a lot easier.