注意：

　　margin:0 auto;/**0：上下    auto：左右**/

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        #wrap{

            width:800px;

            margin:0 auto;

            border:3px solid yellow;

        }

        #header{

            width:100%;

            border:3px solid red;

        }

        #main{

            width:100%;

            border:3px solid green;

        }

        #footer{

            width:100%;

            border:3px solid grey;

        }

    </style>

</head>

<body>

<div id="wrap">

    <div id="header">

        <div>this is header</div>

    </div>

    <div id="main">

        <div>this is main</div>

        <div>red</div>

        <div>red</div>

    </div>

    <div id="footer">

        <div>this is footer</div>

    </div>

</div>

</body>

</html>

　　

HTML5--页面自动居中的更多相关文章

  1. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  2. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  3. 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

    ==============================   2018更新 iphone X 的设计内容   ==============================     我保证你一分钟就 ...

  4. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  5. 移动页面div居中效果代码

    在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...

  6. 【前台页面 BUG】回车按钮后，页面自动跳转

    点击回车按钮后,页面自动的迅速跳转 原因: 表单隐式提交了. 解决方法: 在方法执行完成后,加上return false; 代码如下: /** * 注册按钮的点击事件 */ $("#regi ...

  7. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  8. PHP 页面自动刷新可借助JS来实现，简单示例如下：

    <?php  echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...

  9. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  10. 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

随机推荐

  1. JBD日志的定位、分析和恢复

    在上一篇中,我们介绍了Ext3文件系统的日志可以看做一个文件,由JBD进行管理.自然而然引出如下这些问题: 1)如何定位ext3日志文件和查看日志文件的裸数据? 2)ext3日志文件数据在物理上是如何 ...

  2. 【Linux】df命令 ，查看磁盘容量。

    Oracle 导库时,失败,原因为磁盘满了, 记录下查看磁盘容量的指令 1．命令格式: df [选项] [文件] -a 全部文件系统列表 -h 方便阅读方式显示 -H 等于“-h”,但是计算式,1K= ...

  3. STM32之EXTI——外部中断

    互联网的广大网友,大家早上中午晚上好.EXTI...故名思义..EX表外,出..I表示Intrrupt..所以合起来就是外部中断...说到这..我觉得我最近的六级水平(背单词)又进了一步,稍微自夸了下 ...

  4. MySQL查询语句(select)详解（1）

    1.查询记录 select*from 表名 [where 条件];eg:select*from students;//查询 students 表中所有记录,所有字段的值都显示出来select fiel ...

  5. python技巧 之文件读取

    对于数据分析而言,我们通常需要将文件内容读取到列表中来进行后续的操作. np.array(dataFrame)能将dataFrame类型转换成数组类型. 1.pandas下的文本文件读取(推荐)

  6. C语言2

    今天总结数组和数据类型,数组就是按一定顺序排列,具有某种相同性质的同类型变量的集合,这些变量具有相同的名字和数据类型(int  char long 等),在内存中顺序排列,并通过下标区分(下标从0开始 ...

  7. 关于BeanUiles.copyPropertis()的用法

    最近的项目遇到BeanUiles.copyPropertis(),大大的简化了代码量.用hibernate从数据库中映射的实体类,与pojo对象进行转换,传统做法 Object obj = baseD ...

  8. Mock之easymock, powermock, and mockito

    easymock, powermock, and mockito Easymock Class Mocking Limitations To be coherent with interface mo ...

  9. 【转】NGUI研究院之三种方式监听NGUI的事件方法（七）

    NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,当按钮点击时就可以监听到,这种方法不太好很不 ...

  10. [java]删除数组中的某一个元素

    package org.company.project.test; import java.util.Arrays; import java.util.Scanner; public class Ar ...