很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：
1、没有设置宽度
<div style="margin:0 auto;"></div>
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
2、没声明DOCTYPE
①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！
②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
③你有三种选择，用来声明DOCTYPE
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
④至于选择哪种。。使用过度的就可以了。。
说了半天，margin:0 atuo;不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了！
还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。
分享到：
相关推荐
- `.child`: 定义一个类，用于定位页面中央的`<div>`元素，使其水平和垂直居中。 - `h4`: 设置标题的样式，包括字体大小、字体类型、颜色和位置。 4. **JavaScript**： - `settings`对象：定义了一些变量，如...
为了使元素在垂直和水平方向上居中，我们需要调整`top`和`left`属性。由于元素的宽高已知，我们可以将它们设置为`50%`，让元素的中心点位于其父元素的中心点： ```css .content { top: 50%; left: 50%; } ``` ...
从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ 复制代码代码如下: <style> body { text-align:center} #info{ margin:0 auto; width:500px; text-align:left; border:1px ...
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;...2、没声明DOCTYPE①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么
内容概要：本文汇总了一些常见的前端开发领域的面试题，针对HTML/CSS方面探讨了DOCTYPE声明的作用、CSS盒模型的组成以及如何实现元素水平垂直居中等多种基本知识点；在JavaScript板块深入剖析了包括闭包特性在内的多...
**说明：** 将后面的文本和图像居中显示。`<center>`标签用于使内容居中对齐，但在HTML5中已被废弃。 ##### **20. cite** **说明：** 用斜体显示标明引言。`<cite>`标签用于表示对作品的引用，例如书籍或电影。 #...
- **说明**：`<center>` 标签用于将后面的文本和图像居中显示，但该标签已经被废弃。例如： ```html 这是居中的文本。 ``` ##### 标签：cite - **说明**：`<cite>` 标签用于用斜体显示标明引言。例如： ```html...
对于HTML/CSS方面探讨了DOCTYPE的功能、盒模型的概念并讲解了几种实现网页元素居中的方式；针对JavaScript，则深入介绍了闭包的特点及其应用价值、不同类型的事件传播方式（如冒泡和捕获），还有原型链的工作原理；...
2. **div的垂直居中**：在需要垂直居中的div中，可以通过设置line-height等于div的高度来实现。但这种方法要求内容不换行。例如： ```css .centered-div { line-height: 200px; } ``` 3. **margin加倍问题**：...
- **Doctype** 用于指定文档的类型和版本。 - **严格模式** 和 **混杂模式** 的触发方式不同，通过正确的 Doctype 可以避免进入混杂模式。 - 区分两种模式有助于理解浏览器的渲染行为。 **44. 行内元素有哪些？块级...
`#container`设置了一个固定宽度并居中显示，而`.header`、`.content`和`.footer`则分别定义了各自区域的样式。 在实际开发中，你可以使用Java的Servlet或JSP技术来处理HTTP请求，并根据需要动态生成XHTML页面。...
**52、列出 display 的值，说明他们的作用。position 的值，relative 和 absolute 定位原点是？** - **display 值**：`block`, `inline`, `inline-block`, `flex`, `grid` 等。 - **position 值**：`static`, `...
... ... ... ...DOCTYPE html> ...DOCTYPE html>`：声明文档类型为HTML5。...##### 1....##### 2....DOCTYPE>`：定义了文档类型，可以是Strict、Transitional或...在实际开发过程中，还需要结合CSS和JavaScript来进一步美化页面和增加交互性。
- **重要性**: 正确的DOCTYPE声明可以帮助浏览器以正确的模式渲染页面。 **3. Quirks模式与Standards模式** - **Quirks模式**: 浏览器使用宽松的标准渲染页面，通常为了兼容旧网页。 - **Standards模式**: 浏览器...
- **说明**： - 在父元素上定义`text-align: center;`可以让内容居中。 - 对于IE，这样就足够了；但在Mozilla中还需要在子元素上设置`margin-right: auto;`和`margin-left: auto;`。 通过以上介绍的方法和技术，...
- **描述**: 已废弃，定义居中文本。 - **应用场景**: 替代方案是使用CSS来设置文本对齐方式。 #### - **标签**: `<cite>` - **描述**: 定义作品的名称，如书名、电影名等。 - **应用场景**: 用于标注引用来源，...
2. **垂直居中**：要实现一个`div`内容的垂直居中，可以使用`line-height`属性，将其设置为与`div`相同的高度。例如，`line-height: 200px;`。但这种方法仅适用于单行文本，且需避免文本换行。 3. **浮动元素的...
-- 解释说明 --> div { text-align: center; /* 文本居中对齐*/ } <h3 align="center"> 欢度新年元旦 元旦(New Year‘s Day ，New Year ), 指一年开始的第一天，也被称为"新...
在网页设计中，有时我们希望在用户将鼠标悬停在图片上时，能显示特定的交互元素，例如一个播放按钮。这种效果可以通过结合...但作为基础示例，以上代码已经足够说明如何通过CSS和HTML实现鼠标悬停显示播放图标的功能。
本教程通过一个包含导航条、头部、主要内容、侧边栏和底部的五部分布局来说明这一过程。 3. **HTML模板创建**： HTML模板是网页的基础框架，包含了页面的元信息、标题以及引用外部CSS文件。示例中的HTML模板包含了...