CSS Logo

For these beginner web designers who can’t make an element for example text inside tag <div> in central position of the page using CSS, here is this simple tutorial explains how to make it in the middle of the page horizontally and vertically.

CSS Logo

How to center an element horizontally and vertically middle using CSS ?

1- Make this Position of the <DIV> is absolute ===> position: absolute;.

2- Set the Left and Top as 50% ===> left: 50%;top: 50%;

3- If the width for example 500px make the margin-left is -250px (” – Half of the width“).

4- If the Height for example 500px make the margin-top is -250px (“– Half of the height“).

 

Final Code should be like this :

position: absolute;
left: 50%;
top: 50%;
width:500px;
height:500px;
margin-left: -250px; /*half width*/
margin-top: -250px; /*half height*/

 

 

Tagged:

About The Author

Jack Nilson