
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
How to center your website horizontally with CSS?
To center your website horizontally with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { background: rgb(255, 238, 0); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .main { max-width: 600px; margin: auto; background: rgb(70, 32, 240); color: white; padding: 10px; } p {font-size: 40px;font-weight: lighter;} </style> </head> <body> <div class="main"> <h1>Center website horizontally example</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero, quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p> </div> </body> </html>
Output
The above code will produce the following output −
- Related Articles
- How to center an element vertically and horizontally with CSS?
- How to center a button element vertically and horizontally with CSS?
- How to horizontally center a in another ?
- How to center an image with CSS?
- How to Validate your Website Code?
- How to center an annotation horizontally over a point in Matplotlib?
- How to horizontally center a widget using a grid() in Tkinter?
- How to center a Text object horizontally on canvas using FabricJS?
- FabricJS – How to center a Line object horizontally on a canvas?
- Center image using text-align center with CSS?
- How to Make Your WebSite – “Device Friendly”
- How to create Favicon for your website?
- How to Prevent Your Website from Hackers?
- Center an image with CSS
- How to center an object horizontally with respect to current viewport of canvas in IText using FabricJS?

Advertisements