网站居中 | CSS-Tricks

Eddie Monge

# 2009 年 8 月 20 日

您还需要执行 `

body {
  text-align: center;
 }

#page-wrap {
  text-align: left;
  width: 800px;
  margin: 0 auto;
}

因为 IE 不会总是执行自动边距。

James

评论永久链接# 2011 年 11 月 15 日

谢谢！

我的组织使用的是旧版本的 IE，因此代码第一次运行时无法正常工作。添加 body 元素后，代码完美运行！
Merne

评论永久链接# 2013 年 6 月 20 日

我知道这很老了，但您实际上并不需要 text-align: center; 除非您在其他方面做错了。

如果为元素设置了宽度并且拥有有效的文档类型，IE 支持“margin:auto;”。如果没有有效的文档类型，IE 将进入“怪异模式”，此时自动边距将失效。
Jared

评论永久链接# 2014 年 10 月 15 日

我知道这篇文章是在 2009 年写的，但上帝保佑您！！！我不得不使用第三方服务，只能更新其内容的页眉和页脚，只有在 IE 中，我的页面内容才是左对齐的。
Ofelia

评论永久链接# 2015 年 7 月 6 日

谢谢！
famau

评论永久链接# 2016 年 7 月 18 日

好极了。
太棒了。

但是如何使用 CSS 在 HTML 中创建子菜单。
请帮帮我。
Surya

评论永久链接# 2017 年 9 月 26 日

非常棒的答案，谢谢您
@Eddie Monge

Maria

# 2010 年 4 月 10 日

IE 不行…

Κατασκευή Ιστοσελίδων

# 2010 年 6 月 7 日

升级 IE 或使用 mozilla…

David

评论永久链接# 2010 年 7 月 12 日

对于很多人来说，升级 IE 不是一个选择。许多组织会锁定他们的系统，以防止软件更新和新软件安装。对于 IE 的修复通常仍然需要包含。
Alexander von Gluck

评论永久链接# 2011 年 3 月 23 日

通过进行黑客攻击和变通方法来继续支持 IE6/7 会损害网络行业… 您不会为 10 年前的 Mozilla 添加兼容性内容… 是吗？
Stephen

评论永久链接# 2011 年 4 月 1 日

@Alexander：对于某些开发人员来说，放弃对 IE6/7 的支持是不可能的。我是一家电子商务网站的前端开发人员，由于教育和企业的影响，该网站仍然有两位数百分比的 IE6 用户。这是一个令人悲伤的现实，但我仍然必须在我的代码中包含 IE 黑客攻击。

webby

# 2010 年 6 月 21 日

对于 IE，尝试这样

#page-wrap { 
  position: absolute; 
  left: 50%; 
  width: 800px;
  margin-left: -400px;
}

Kesav

评论永久链接# 2010 年 10 月 11 日

绝对定位对于复杂的网站来说不是一个好的解决方案。主要代码片段 +（居中对齐的 body）是最佳解决方案
selim

评论永久链接# 2017 年 4 月 19 日

此解决方案解决了我的表单对齐问题。谢谢。

Michi

# 2010 年 10 月 30 日

您也可以使用
<pre>
<center>
</pre>
标签位于页面顶部。

Ole

# 2010 年 10 月 31 日

这样做

#page-wrap {
width: 800px;
text-align: center;
margin: 0 auto;
}

Domenico Cannetti

# 2010 年 11 月 24 日

*{
margin:0px;
padding:0px;
}

body {
text-align:center; /* 这样做比较好 */
}

#page-wrap {
width: 800px;
text-align:left;
margin: 0 auto;
}

Ashish

# 2010 年 12 月 2 日

您可以使用以下代码，它将在所有浏览器中正常运行

Matth

评论永久链接# 2011 年 1 月 18 日

Ashish，看不到您的代码！

Grays

# 2011 年 4 月 6 日

非常感谢… 搞定了，只是缺少了“auto”这个词！！！

Σχολες οδηγων Θεσσαλονικη

# 2011 年 5 月 8 日

感谢分享，继续帮助我们！

btelis

# 2011 年 5 月 13 日

非常有用，感谢分享 Eddie

edward

# 2011 年 5 月 30 日

嗨 ed… 谢谢您的教程……！
我以前经常遇到这种情况，当我在 Photoshop 中切片我的设计并将其导出到网页时，整个页面会出现在页面的左侧，我认为使用此代码就不会发生这种情况，对吗？…………?

Tosh

# 2011 年 6 月 10 日

在旧的 IE 中，只需将 doctype 作为第一个页面元素使用，例如

…

然后 margin:auto 将起作用

narkotika

# 2011 年 6 月 17 日

很棒的教程，适合新手（我可是新手中的佼佼者！)

κατασκευή ιστοσελίδων

# 2011 年 7 月 6 日

我做到了，谢谢 chris！

εσωρουχα

# 2011 年 8 月 16 日

喜欢 css，有什么学习更多内容的指南吗？？？

Amit Yadav

# 2011 年 9 月 6 日

这个网站上内容/文章/教程太棒了，你真是太厉害了！

Bob

# 2011 年 10 月 13 日

永远不要使用文本对齐中心来定位对象。将边距和填充归零并使用通配符也是另一种不好的做法。我建议使用 EricMeyer 的 CSS 重置。如果 margin: 0 auto 导致您遇到问题，请使用

#page-wrap {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}

Thor

评论永久链接# 2012 年 2 月 1 日

这对我来说很有道理，并且完美地运行。我也无需在 body 选择器的 css 中更改文本对齐方式。谢谢 Bob。
Nathar Leichoz

评论永久链接# 2014 年 1 月 12 日

如果您使用绝对定位，并且浏览器窗口小于内容，则会导致内容被屏幕左侧隐藏。尝试在自动取款机等小型屏幕设备上启动 IE 以了解情况。

Κατασκευή ιστοσελίδων

# 2011 年 10 月 31 日

完成了

Christopher

# 2011 年 11 月 28 日

教程做得没错！请记住正确设置您的 DOCTYPE。

最好使用..

!DOCTYPE html

christopher

# 2011 年 12 月 28 日

我过去使用过两种主要方法来实现这一点，但我可能更常使用后者.. 方法 1，轻量级。 . .

html, body {
text-align:center;
width:100%;
height:100%;
}

/* original thread code */

#page-wrap {etc..}

以及方法 2，它应该覆盖所有问题…

html, body, {
text-align:center;
width:100%;
height:100%;
}

#fullpage-div /* usually named container or wrapper */ {
text-align:center;
width:100%;
height:100%;
} 

/* of course you'd add that div to the html, body style to compress your code, I included it separately here to illustrate the additional container.  */

/* then add the margin 0 auto container which in this case is the original thread code */

#page-wrap {etc..}

你怎么看？

kosmimata

# 2012 年 1 月 31 日

在哪里可以了解更多内容？？？

co2 effects

# 2012 年 3 月 10 日

我的网站是在 WordPress 中构建的。此代码是否适用于它？

Jake

# 2012 年 4 月 4 日

*{padding: 0; margin: 0 auto;}
body{
text-align: center;
}
#page-wrap{
width: 800px;
position: relative;
text-align: left;
}

Imtiyaz

# 2012年4月30日

#page-wrap
{
width: 800px;
margin: auto;
}

Zahidul Hossain

# 2012年9月8日

尝试使用 margin: 0 auto;，但始终失败 :(

Hamidjon

# 2012年10月4日

将世界从 Internet Explorer 6 中移出 -> http://www.ie6countdown.com/

mohsin

# 2012年11月30日

{width:960; margin:0 auto;}
今天是最好的技术

Cindy

# 2013年1月16日

我为我的 HTML 和 CSS 样式表使用了以下代码，它非常有效。我的网站实际上是 1000 像素宽，所以我只需将代码从 800 修改到 1000，并将 margin-left -400 改为 -500，遵循下面的格式代码。

为我的 CSS 样式表，我添加了以下代码

page-wrap {

position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}

Roberto Alves

永久链接到评论# 2015年3月8日

Cindy，我为了找到网站的解决方案，付出了很多努力。非常感谢你的指导。除了你的 html 代码之外，其他方法似乎都没有用。我对此表示感谢。此致，Roberto

budi

# 2013年3月15日

感谢您的脚本。这对我有用。我修改了 css，然后我可以将 1000 像素宽的网站居中。

mohammad reza

# 2013年8月24日

我使用 flexbox 进行网页设计，但我不能在 flexbox 中使用宽度，那么如何在 css 中将 body 居中呢？

Srikanth Palagani

# 2013年8月28日

嗨，我需要一个针对特定场景的解决方案

我有一个宽度为 1000 像素的 div，
在 1000 像素的 div 内，我还有一个宽度为 300 像素的小 div，我需要将这个 300 像素的 div 放在 1000 像素的 div 的正中央

有人可以帮忙提供一个示例吗？

mohammad reza

永久链接到评论# 2013年8月28日

也许你在主 div 中使用这段代码

{
margin: 0 auto;
padding:0;
}

James

# 2013年10月26日

这始终取决于我们使用的 cms。我之前用过很多没有此选项的旧 cms，但 WordPress 和 Joomla 非常易于使用。

Deepti Reddy

永久链接到评论# 2013年10月31日

对于这种问题，你需要为该主 div 保持 display:table-cell，并使其垂直对齐：middle，然后它将自动显示在正中央。

Kevin

# 2013年11月13日

我一直使用这段代码
page-wrap {position: absolute;left: 50%;width: 970px;margin-left: -485px;}

在浏览器中运行良好，但我在移动设备上浏览时发现了一些问题——滚动左侧导航栏时，左侧会消失约 30-40 像素，而右侧则完好无损。

其他人也遇到过此问题吗？

网站是 http://www.teddybearfriends.co.uk/，如果有人想看看。

Chris Tolworthy

# 2013年12月30日

Kevin

我也遇到过同样的问题，事实证明原因非常简单。居中网站的最佳方法是使用

#page-wrap{width: 970px; margin: 0 auto; }

但这通常不起作用。所以你需要使用

#page-wrap {width:970px; position:absolute;left:50%;margin-left:-485px;}

这在宽屏上运行良好，但在窄屏（例如移动设备）上会裁剪掉左侧边缘。使用“margin: 0 auto”的问题在于它与各种“position:absolute”命令冲突。因此这应该有效

目前，你的 html 页面显示

<div id="fullcontent">

并在 css 中将“fullcontent”定义为

#fullcontent {position:absolute;top:188px;left:190px;width:770px;z-index:20}

诀窍是将 html 中的“top”部分定义为一个单独的 DIV。例如

<div id="new2" style="position:absolute;top:188px;"> <div id="fullcontent"> [页面其余部分] </div> [不要忘记关闭新的 div！]

然后在 css 文件中定义“fullcontent”，但不要添加“top”，例如
#fullcontent {position:absolute; left:190px;width:770px;z-index:20}

这应该有效。HTML 的其他一些部分也可能被定义为“absolute”，因此它们会滞后：尝试同样的方法。如果仍然不起作用，请尝试在“position:absolute”div 内使用“position:relative”。如果仍然不起作用，请检查是否两次设置了完整页面的宽度：例如“fullcontent”将页面定义为 width:970px（或任何值），并且该包装器内部的某个元素也定义了它，这可能会让浏览器感到困惑，导致它在右侧留下大量空间。

希望这有帮助。我不是专家，所以无法回答任何后续问题，但我遇到了同样的问题，这似乎对我有用。我知道，当所有技术网站都说“这样做，很简单”，而你精确地复制了代码，但它却不起作用时，这是多么令人沮丧。

新年快乐。

Chris

omar abdi

# 2014年3月29日

如何使用 html 创建主 div 页面
其他 div 页面必须位于主 div 内

作者：omar abdi
地址：摩加迪沙 - 索马里

diwakar

# 2014年5月5日

嗨
在 css 代码中，我们使用什么标签来保持设计网站在放大/缩小后居中呢？

Musthafa

# 2014年6月5日

html,body
{
padding:0px;
margin:0px;

}
body
{
    background-color: #fff;
    font-family:fontone;

}
    .wrap
    {
    width:100%
      margin: 0 auto;
    }

居中对它不起作用

该怎么办

Sotis

# 2014年6月19日

我需要一个关于如何在响应式设计中居中文本的解决方案。我的网站将在 RD 上更改，我已经测试过了，但没有 100% 解决问题。谢谢

Rock

# 2014年7月23日

{ margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
:first-child+html #page {position:relative;}/ie7*/
html #page{position:relative;}/ie6/

#content_container{display:table-cell;vertical-align: middle;}
:first-child+html #content_container{position:absolute;top:50%;}/ie7/
* html #content_container{position:absolute;top:50%;}/ie6*/

:first-child+html #content{position:relative;top:-50%;}/ie7/
* html #content{position:relative;top:-50%;}/ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}

Jyothi

# 2014年8月6日

太好了！

谢谢

Paul W.

# 2014年12月29日

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

运行良好。谢谢

artero

# 2015年2月12日

这些方法只水平居中网页
如何垂直居中网页？？？

inder

# 2015年6月20日

我以前经常遇到这种情况，当我在 Photoshop 中切片我的设计并将其导出到网页时，整个页面会出现在页面的左侧，我认为使用此代码就不会发生这种情况，对吗？…………?

Srinivas

# 2015年12月1日

太棒了！对我有用 :)

Huy

# 2016年3月10日

非常感谢！这对我有用：））学习新事物总是很棒的！

Mizan

# 2016年8月11日

我知道它，但这帮助我再次回忆起来。

ZishanAdThandar

# 2016年8月13日

非常感谢您提供这个简单而漂亮的代码。它解决了我的一个小问题，却很棘手。干得好…继续…

tareq arar

# 2016年8月17日

谢谢，非常有帮助

Seth-666

# 2016年11月7日

您好，我是 html 和 css 新手…我听说过很多关于 flexbox 的…并且在这里看到了一种居中整个页面的旧方法…但是使用 flexbox 居中整个网站不是更好吗？

Onfortheteam

# 2016年12月13日

我遇到一个问题，网站完全居中，并且在我上传网站后没有问题，预览效果很好，但当输入 URL 时，它会左对齐，请帮忙，这让我很抓狂。

albastru22

# 2018年2月24日

如果我想在整个页面之外的某个部分上设置背景，该怎么做？将某个部分的所有内容放在一个容器中是好习惯吗？
考虑到响应式，使用 max-width 而不是 width 怎么样？

Christine

# 2018年8月1日

body {
  text-align: center;
 }

#page-wrap { 
  position: absolute; 
  left: 50%; 
  width: 800px;
  margin-left: -400px;
}

  
    
      
      center

经过测试，它非常有效！

评论

发表评论 取消回复

发表评论取消回复