注意：

　　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. Linux Kernel Oops异常分析

    1．PowerPC小系统内核异常分析 1.1  异常打印 Unable to handle kernel paging request for data at address 0x36fef31eFa ...

  2. Android -- 自动完成文本框(可以匹配多个值，并以，结尾)

    1. 

  3. debian 安装svn apache 小记. AuthzSVNAccessFile 不生效问题.

    docker 使用docker镜像搭建svn+Apache环境 https://my.oschina.net/u/2006667/blog/637882 1,安装 apache ,svnapt-get ...

  4. 李洪强经典面试题145-Runloop

    李洪强经典面试题145-Runloop   Runloop 什么是 Runloop? 从字面上讲就是运行循环. 它内部就是do-while循环,在这个循环内部不断地处理各种任务. 一个线程对应一个Ru ...

  5. 读书笔记 —— 《css秘密花园》

    浏览器兼容性有效性信息查询 : Can I Use? http://caniuse.com/ 自动为css添加浏览器厂商前缀 https://autoprefixer.github.io/ 在线编辑H ...

  6. 使用MS Test进行单元测试

    MS Test也可以方便的进行单元测试,可以通过Visual Studio很方便的建立单元测试. 添加对待测试工程的引用,即可方便的开始单元测试. 最基本的一些测试使用如下: using System ...

  7. #20145205 《Java程序设计》第3周学习总结

    教材学习内容总结 1.java中的浮点数具体是由分数进行表示的,所以在有些时候,看起来很简单的基本运算,运行结果会让人很是不理解,原因是分数有时表示浮点数时无法完全恰好表示,可能会出现无限循环的情况. ...

  8. jquery 时间戳与日期转换

    (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: functio ...

  9. C++STL -- vector实现

    STL的vector简化实现 本质 vector说到底就是一个动态数组,我们需要做的就是管理动态数组的内存,和元素的增加,删除,移动等. template <typename T> cla ...

  10. canvas中的rotate的使用方法

    今天在绘制一个足球滚动的时候,想使用rotate方法,之前看到这个方法的时候,并没有引起任何重视,无非就是和CSS3里的rotate一样的用么... 遗憾的是,事实并非如此,由于代码在公司,我也就不去 ...