注意：

　　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安装模块的方法很多,在此仅介绍一种,不需要安装其他附带的pip等,python安装完之后,配置环境变量,我由于中英文分号原因,环境变量始终没能配置成功汗. 1:下载模块的压缩文件解压到任意 ...

  2. Leetcode Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  3. 【JAVA】Calendar

    Calendar是JDK 1.1增加的类 最近使用了下Calendar发现几个很让人抓狂的问题 源码: public final static int SUNDAY = 1; public final ...

  4. php获取html纯文本，解决编辑器手动键入空格造成的无意义空白字符（空值问题）

    在项目中,我们常常需要用到一些验证,不管是前台还是后台的,上传的问题时,需要内容不为空,但可视化编辑器的介入让手动敲入空格跳出了常规的检测.空格是一种排版的手段,但毫无内容只有空格就显得没有意义了,今 ...

  5. EasyTouch绑定事件在电脑上点击有效Android上无效的解决方法

    最近做一个RPG类的游戏发现使用EasyTouch虚拟摇杆插件在电脑上点击有效Android上无效,查找资料发现是Easy Joystick中的一个属性interaction type要设置成 Dir ...

  6. Python 随机数生成总结

    random.uniform(a, b),返回[a,b]之间的浮点数 random.randint(a, b),返回[a,b]之间的整数 random.randrange([start], stop[ ...

  7. yii2使用相关记录

    #Yii::$app->user 是指yii\web\User这个类 #yii2在命令行下执行 D: cd D:\wnmp\php5 php D:\wnmp\www\yii2\yii test/ ...

  8. ASP.Net一键自动化更新代码、编译、合并dll、压缩js、css、混淆dll、zip打包、发布到测试环境的bat批处理

    不废话,直接代码: D: cd D:\src\testproj\PrecompiledWeb svn revert ../ -R svn update .. rmdir BS /S /Q C:\Win ...

  9. 过滤关键字防止XSS攻击

    public static string ClearXSS(string str) { string returnValue = str; if (string.IsNullOrEmpty(retur ...

  10. 对Git的理解

    GIT属于计算机软件,功能是分布式版本控制系统,字面意思还挺有意思的:愚蠢或不开心的人,首先呢,这款软件是免费的.这款软件是免费的.这款软件是免费的.(重要的地方要说三遍)即使它不是免费的,在我大天朝 ...