In this tutorial I will show you how you can center a HTML element horizontally and vertically using CSS.
Vertical Centering
For vertical centering an element the container of the element should be displayed as a table-cell. The container should also have a height so that the browser can calculate the center position. And also the vertical-align property should be set to middle.
Horizontal Centering
For horizontally centering an element, the element should be displayed as block element. It should have its width set and its margin left and right should be made to be automatically calculated. The container should be block level element or must have some width set.
Horizontal and Vertical Centering together
Here we mix both the techniques.
Leave a Reply