<!doctype html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>使DIV相对窗口大小左右拖动始终水平居中</title>

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <style type="text/css">

        body{

            margin:0px;

        }

        #parentBox{

            /* 父盒子 */

            max-width:100%;

            min-height:400px;

            height:auto;      /*声明高度自适应*/

            padding:50px 0px; /*内边距可以指定*/

            background:#ccc;

        }

        #centerDIV{

            /* 子层 */

            width:60%;        /*相对父DIV宽度比例*/

            height:auto;      /*声明高度自适应*/

            margin:0px auto;  /*水平居中*/

            background:yellow;

        }

    </style>

</head>

<body>

    <div id="parentBox">

        <div id="centerDIV">

            使DIV相对窗口大小拖动始终水平居中：<br />

            窗口左右（水平）拖动时，DIV层随窗口宽度变化而变化，始终水平居中。<br /><br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

            abcdefg<br /> abcdefg<br /> abcdefg<br /> abcdefg<br />

        </div>

    </div>

</body>

</html>

使DIV相对窗口大小左右拖动始终水平居中的更多相关文章

  1. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  2. 使 div 元素看上去像一个按钮

    使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...

  3. Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

         div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...

  4. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  5. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  6. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  7. HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  8. Duilib改进窗口拖动，使整个窗口都能拖动两种方法(转载)

    转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...

  9. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

随机推荐

  1. Struts 2（五）：输入校验 & 校验框架

    第一节 Struts2输入校验 1.1 输入校验的重要性 输入校验分为客户端校验和服务器端校验.客户端校验用来过滤用户的错误操作,一般使用JavaScript代码实现.服务器端校验用来防止非法用户的恶 ...

  2. 译图智讯VIN码识别助力汽配商转型升级

    汽配猫是上海佳驰经合能源科技有限公司自主开发的汽车配件B2B网上商城及服务平台,该平台依托互联网云技术.利用创新的商业模式及互联网思维,整合汽配产业链优秀资源,为汽车维修保养企业等产业链各方面提供汽配 ...

  3. Charles连接苹果及JSON乱码情况解决

    1.  Charles的JSON乱码情况解决: 点击Charles界面上的help—SSL proxying—install Charles Root Certificate,将证书安装到[受信任的根 ...

  4. 180726-InfluxDB基本概念小结

    InfluxDB基本概念小结 InfluxDB作为时序数据库,与传统的关系型数据库相比而言,还是有一些区别的,下面尽量以简单明了的方式介绍下相关的术语概念 I. 基本概念 mysql influxdb ...

  5. jmeter逻辑控制器

    刚开始学习,只写几种了解的逻辑控制器 1.简单控制器 只用来组合采样器和其他逻辑控制器,不影响jmeter的运行 2.循环控制器 用来循环执行采样器和其他逻辑控制器,例如一个用户发送特定请求多次,即可 ...

  6. 韦大仙--LoadRunner压力测试：详细操作流程

    一. 录制脚本 1.安装完毕后,创建脚本: 点击OK之后,会弹出网址,之后创建Action,每进一个页面添加一个Action,录制结束后,终止录制. 二. 修改脚本 1.脚本参数化 将登录的用户名密码 ...

  7. Lua学习笔记（8）: 元表

    元表 Lua中提供了元表(Metatable),其实这个元表就比较像面向对象中的类了,可以通过给某些特殊的标识符赋值达到重载的效果,这些特殊的标识符有: 名称 功能 __index 元表的索引方法 _ ...

  8. Unity面试问题归总

    Unity面试问题归总 C#中Struct和Class的区别 Struct是Class的一种 A*寻路 https://blog.csdn.net/windcao/article/details/15 ...

  9. 3.5星|《算法霸权》：AI、算法、大数据在美国的阴暗面

    算法霸权 作者在华尔街对冲基金德绍集团担任过金融工程师,后来去银行做过风险分析,再后来去做旅游网站的用户分析.后来辞职专门揭露美国社会生活背后的各种算法的阴暗面. 书中提到的算法的技术缺陷,我归纳为两 ...

  10. 3星|《十大全球CEO亲授企业高速成长的关键战略》:作为CEO，我也非常坦率地表明过家庭优先于工作

    十大全球CEO亲授 企业高速成长的关键战略(<哈佛商业评论>增刊) <哈佛商业评论>上的10来篇文章合集.大部分都看过,除了一篇中信的访谈,其他大部分是美国的有点旧的案例. 总 ...