how to display the whole page in the center of the browser

asp.net master-pages

38,471

Solution 1

Firstly, the use of the center tag has been deprecated, so you shouldn't use it.

<center>
    Your content here
</center>

Your solution of (I've put the css inline for clarity)

<div style="width: 1400px; margin: 0 auto;">
    Your content here
</div>

Is the correct method of centering content on a page.

As you have noticed, if the screen is smaller than your content width, it doesn't appear to be centered. This is because there is no space for a margin on the left or right of the page and it would be inconsistent to start the browser scrollbar in the middle of the page.

Your options are:

Live with it - it's how all center-aligned websites work
Reduce the width of your website to work on smaller screens (it will then have a larger margin on larger screens)
Make your design more fluid - like the example below

Hope this helps.

<div style="width: auto; margin: 0 10%;">
    Your content here
</div>

Solution 2

just playaround with following styles

<body> 
 <div id="divMain"> 
  ... 
 </div> 
</body> 


body 
{ 
 margin: 0; 
 padding: 0; 
 text-align: center; 
} 
#divMain
{ 
 margin: 0 auto; 
 padding: 0; 
 width: 1024px; 
 text-align: left; 
} 



or

.divMain
{
position: absolute;
left: 10%;
width: 80%;
}

38,471

Author by

Mishigen

Updated on January 26, 2020

Comments

Mishigen about 4 years
i have three divs outside my contentplaceholder

masterpage code:
```
<div id="content-outer" class="clear">
 <div id="content-wrapper">    
   <div id="content">      
     <asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
      </asp:ContentPlaceHolder>     
   </div>
 </div>
</div>
```
the width of content outer div is 1400px,it works well in the screen whose width is 1400 or more but when i run it in the scree of width 1024, the whole page starts from left,,,i want to center align my page when open in the browser,i have given some css properties like

content-outer: margin-left:auto; margin-right:auto;(not working)

but i m not able to center align my whole page,,,plz tell me how can i do that,,i have also given the same properties for body but again no luck