How to horizontally center a using CSS?

To Horizontaly centered the <div> Element :

We can use the property of margin set to auto i.e margin:auto;.
The <div> Element takes up its specified width and divide equally the remaining space by the left and right margins.

Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width:300px; 
    margin:auto; 
    border: 3px solid green; 
    color:red; 
} 
h1, h2{ 
TEXT-ALIGN:CENTER; 
color:green; 
font-style:italic; 
} 
</style> 
</head> 
<body> 
<h1>GeeksForGeeks</h1> 
<h2>margin:auto</h2> 
  
<div> 
It is a computer science portal for Geeks.GeeksForGeeks ia a good website for learning computer science; 
</div> 
  
</body> 
</html> 

Output

Supported Browsers: The browser supported by margin:auto property are listed below:

Apple Safari
Google Chrome
Firefox
Opera
Internet Explorer

How to horizontally center a using CSS?

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books