Centering Things in CSS is a bit hard. The problem is which way to reach for among the different ways available to Center Elements in CSS. In this tutorial, I have explained how to center an element with CSS Vertically, Horizontally, at Block Levels.
Centering elements horizontally is quite simple compared to vertical centering. We have present different ways to center the elements horizontally. To change the text to center horizontally is quite simple. You can simply set the text-align property to center in order to center an element horizontally.
1p { 2 text-align: center; 3} 4
The modern way to center anything is to use Flexbox rather than going with the text.
1#mysection { 2 display: flex; 3 justify-content: center; 4} 5
Any element within my section will be centered horizontally by using the above code. There is an alternative method to go with if you don't want to use the flexbox.
Anything which is not text can be centered by applying an automatic margin on the left and right and set the width of the element.
1section { 2 margin: 0 auto; 3 width: 50%; 4} 5
The above margin: 0 auto; is a shorthand for
1section { 2 margin-top: 0; 3 margin-bottom: 0; 4 margin-left: auto; 5 margin-right
Do remember to set the item to display: block if it is an inline element.
Centering an element vertically can be a difficult task. Flexbox gives us a simple way to center alignment vertically.
1#mysection { 2 display: flex; 3 align-items: center; 4} 5
Any element within my section will be centered vertically.
You can combine the flexbox techniques to center both vertically and horizontally for an element in the page.
1#mysection { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5
We can perform the same using CSS Grid:
1body { 2 display: grid; 3 place-items: center; 4 height: 100vh; 5}