如何在浏览器的中心显示整个页面答案

【问题标题】：how to display the whole page in the center of the browser如何在浏览器的中心显示整个页面
【发布时间】：2010-01-26 16:37:12
【问题描述】：

我的内容占位符之外有三个 div

母版页代码：

<div id="content-outer" class="clear">
 <div id="content-wrapper">    
   <div id="content">      
     <asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" >
      </asp:ContentPlaceHolder>     
   </div>
 </div>
</div>

内容外部div的宽度为1400px，在宽度为1400或更大的屏幕上效果很好，但是当我在宽度为1024的屏幕上运行它时，整个页面从左边开始，，，我想居中对齐我的页面在浏览器中打开时，我给出了一些 CSS 属性，例如

内容外：左边距：自动；边距右：自动；（不工作）

但我无法将整个页面居中对齐，请告诉我该怎么做，我也为 body 提供了相同的属性，但还是没有运气

【问题讨论】：

你的身体代码
你的意思是水平和垂直对齐
删除你在...之前放置的任何对齐，并将任何你想要居中的东西放在你的html代码中

标签： asp.net master-pages

【解决方案1】：

首先，中心标签的使用已被弃用，所以你不应该使用它。

<center>
    Your content here
</center>

您的解决方案（为了清楚起见，我已将 css 内联）

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

是在页面上居中内容的正确方法。

正如您所注意到的，如果屏幕小于您的内容宽度，它似乎不会居中。这是因为页面左侧或右侧没有留出空白的空间，在页面中间启动浏览器滚动条会不一致。

您的选择是：

接受它 - 这是所有居中对齐的网站的工作方式
缩小网站的宽度以在较小的屏幕上工作（然后在较大的屏幕上会有更大的边距）
让您的设计更加流畅 - 如下例所示

希望这会有所帮助。

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

【讨论】：

【解决方案2】：

只是玩弄以下样式

<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%;
}

【讨论】：