注意：

　　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. IIS监控指标

    IIS Global Active Flushed Entries Active Flushed Entries 是缓存文件句柄,当前传输全部完成后将关闭此句柄.IIS Global 对象. Web ...

  2. maven archetype:generate 命令简化项目模板数量

    在maven里使用 mvn archetype:generate 来创建项目是十分方便的,但有时也不尽然.在网络不好时,从网络上加载 archetype-catalog.xml文件(http://re ...

  3. 启动mysql服务 报1067 错误

    启动mysql 报1067 错误         一般报1067错误,先看一下data/my.ini配置文件 中的路径 datadir ,log-bin ,log-error 报1067错误原因 多种 ...

  4. http协议笔记

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

  5. 保证唯一的一种js提交数据方式，还不错

    <div class="project_right"> <div class="project_title_right" id="m ...

  6. pring — jdbc 配置文件的设置

    ---参考配置,  链接mysql 数据库 <!-- 1.配置数据源 --><bean id="dataSource" class="org.sprin ...

  7. selenium RC+JAVA 运行所遇到的问题

    1.报错一 Failed to start new browser session: java.lang.RuntimeException: Firefox 3 could not be found ...

  8. JMS

    发消息 与 收消息 http://www.huaishao8.com/config/activemq/143.html http://yingzhuo.iteye.com/blog/1566612 h ...

  9. 《storm实战-构建大数据实时计算读书笔记》

    自己的思考: 1.接收任务到任务的分发和协调   nimbus.supervisor.zookeeper 2.高容错性                            各个组件都是无状态的,状态 ...

  10. LeetCode Power of Four

    原题链接在这里:https://leetcode.com/problems/power-of-four/ 题目: Given an integer (signed 32 bits), write a ...