CSS center align web page and HTML

Last updated on December 2nd, 2015 at 01:35 am

Click to rate this tutorial!
[Total: 1 Average: 5]

This is a quick tip on how to center a webpage completely using CSS and HTML. Here we are using div tag for centering the entire content inside webpage.

 <div id="outer-div-main">
    <!-- your website contents here --> Hi guys,
<p>
This content will be aligning to the center of the webpage. This works good on internet explorer, Mozilla and Chrome. So please go-ahead and implement the script if you find it easy and straight forward.
  </p></div>

Add this CSS code just inside the body tag

body
{
text-align: center;
}
#outer-div-main
{
text-align: left;
width: 1024px;
margin: 0 auto;
}

Create an html file and put all the above code together. Sample below

<html>
<body>
<style>
body
{
text-align: center;
}
#outer-div-main
{
text-align: left;
width: 1024px;
margin: 0 auto;
}
</style>
<div id="outer-div-main">

    <!-- your website contents here --> Hi guys,
<p>
This content will be aligning to the center of the webpage. This works good on internet explorer, Mozilla and Chrome. So please goahead and implement the script if you find it easy and straight forward.
  </p></div>
</body>
</html>

This script is compatible with all the latest browsers.

Click to rate this tutorial!
[Total: 1 Average: 5]

Leave a Reply

Your email address will not be published.