注意：

　　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. python中列表，元组，字符串互相转换

    列表,元组和字符串python中有三个内建函数:,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示 >>> s = "xxxxx& ...

  2. [深入浅出WP8.1(Runtime)]Windows Phone 8.1和Silverlight 8.1的区别

    1.2.2 Windows Phone 8.1应用程序模型 Windows Phone 8.1支持多种开发语言来开发应用程序,包括C#.VB.JavaScript和C++,那么本书的代码主要是采用C# ...

  3. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  4. http协议笔记

    协议:双方/多方共同遵守的一个规范.类比生活中协议 理解: webservice=http协议+xml Rest         =http协议+json 开始,客户端和其他服务器都是没有关系的,比如 ...

  5. CI框架入门2

    文件目录与布局 1.user_guide    用户手册,可删 2.readme.rst    说明,可删 3.license.txt     证书,可删 4..gitignore composer. ...

  6. WPF整理-XAML构建后台类对象

    1.XAML 接触WPF的第一眼就是XAML---XAML是用来描绘界面的.其实不然! "Actually, XAML has nothing to do with UI. It's mer ...

  7. IOS网络第二天 - 06-POST请求

    ************POST请求 #import "HMViewController.h" #import "MBProgressHUD+MJ.h" @in ...

  8. 浏览器IE与非IE区分

    1. window.VBArray  IE自带 if(window.VBArray) {console.log("IE 浏览器");} else{console.log(" ...

  9. myBatis的一对多查询，主要利用resultMap实现一次查询多个结果集

    日常开发中有这中场景,一个用户有多个角色,一个角色又有多个菜单,想查出一个用户的所有菜单.除了常见的关联查询之外,更使用的应该是利用myBatis的resultMap来实现一次查询出多个结果集,缺点: ...

  10. /proc/sys/vm/参数

    1) /proc/sys/vm/block_dump该文件表示是否打开Block Debug模式,用于记录所有的读写及Dirty Block写回动作.缺省设置:0,禁用Block Debug模式2) ...