How to center your website horizontally with CSS?

Learn, how to center a website horizontally with CSS, how to horizontally center a block element?
Submitted by Apurva Mathur, on June 24, 2022

You may have observed that many website's content is centrally organized. Even this website is centrally organized. People usually prefer this style because then the right and left side can be used for extra information, most commonly it is used to provide commercials. According to some survey's it is always a good practice to center your website content, as user's don't get bored from the content.

To horizontally center a block element (like <div>), use margin: auto;

Let us see how to center your website?

<!DOCTYPE html>

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style>
         .center {
         max-width: 800px;
         margin: auto;
         background: darkseagreen;
         color: white;
         padding: 10px;
         }
         p {font-size: 36px;font-weight: lighter;}
      </style>
   </head>
   <body style="background: whitesmoke;font-family:'Arial Rounded MT Bold';">
      <div class="center">
         <h1 style="text-align: center;">INCLUDE HELPS EXAMPLE</h1>
         <p>As we now know that we can not buy happiness with money and there is no other shortcut to happiness. <br>It is something that you feel from within.
            In addition, true happiness comes from within yourself.Happiness is basically a state of mind.Moreover, it can only be achieved by being positive and avoiding any negative thought in mind. And if we look at the bright side of ourselves only then we can be happy.
            True happiness means the satisfaction that you find worthy. The long-lasting true happiness comes from life experience, a feeling of purpose, and a positive relationship.
         </p>
      </div>
   </body>
</html>

Output:

Example: Center your website horizontally

To center a website you just need to provide the max-width according to your preference (here max-width is set to 800px) and give different background colors to the body and content. This will easily center your website as well as you can easily distinguish between the main body and the content body. All of the other properties can be set according to your creativity.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.