Forums

Had a spare 5 minutes so I created it for you.

https://codepen.io/tomnoble92/pen/VxjgGa

Used floats so it has great browser coverage.

Have a look at the code and see how it works.

It’s a good start anyway you can tweak it further :)

Hi @SteveLovell,

If you want to place the logo vertically and horizontally centered then you can try display: flex like this.

.wrapper {
display: flex;
height: 100vh; /* Height must 100% to keep the child vertically centered */
}

.child {
margin: auto; /* This will keep the child always to the center both vertically and horizontally */
}

There are more solutions but this seems to be the simplest. You can try this also. It serves the purpose.

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}