Centering content in CSS can be rather confusing, sometimes it’s just the matter of applying
text-align: center; and by magic everything centers. Below are the 4 main CSS methods I use on a regular basis.
Probably the most renowned way would be to apply
text-align: center; to a block-level element and providing the nested elements are block-level, they will center. As images are inline by default simply apply either
display: block; or
display: inline-block; to it and watch the magic happen.
justify-content: center; and
align-items: center; to your parent element will perfectly center any nested elements, vertically and horizontally. If you just want to center content horizontally just use
justify-content: center; . Vertically just use
display: flex; and
align-items: center;. Please visit css-tricks for a more comprehensive guide on flexbox.
If you intend to absolutely position an element within a
position: relative; parent, applying the following css will allow you to center this element horizontally and vertically.
left: 50%; ,
transform: translateX(-50%), translateY(-50%);
Last but not least, margin. Applying
margin: 0 auto; will center elements providing they have a width applied to them, like a container for instance.