Tutorialspoint.dev

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter