<!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. 第七篇 Postman+Node.js+Newman+Jenkins实现自动化测试

    今天终于不咋忙了,学习整理一下一直想做却没实现的事儿,这事已经折磨团队半年之久了.因为项目是B端业务的测试,测试过程中需要生产大量的测试数据,而且都是跨多个系统的测试,对于后置流程的测试,这些同学往往 ...

  2. 优先队列（堆) -数据结构（C语言实现）

    数据结构与算法分析 优先队列 模型 Insert(插入) == Enqueue(入队) DeleteMin(删除最小者) == Dequeue(出队) 基本实现 简单链表:在表头插入,并遍历该链表以删 ...

  3. 【PMP考试专栏】01、五大过程组和十大知识领域

  4. CSP201609-2:火车购票

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  5. 自然语言处理 - 如何通俗地理解TFIDF？

    本博客属个人学习笔记,如有疏漏,欢迎在评论留言指出~转载请注明. 在自然语言处理中,TFIDF常常被人提及.很多材料都提及TFIDF中的“普遍重要性”,但很少有材料去简单解释其中的原理.TFIDF其实 ...

  6. 华为笔试——C++的int型数字位排序

    题目:int型数字位排序 题目介绍:输入int 型整数,按照从右至左的顺序,返回不含重复数字的新整数. 例: 输入: 99824270 输出: 072489 分析:乍一看很简单,但是很容易忽略int ...

  7. 亚马逊首次推出卖家APP 可掌握商品盈利状况

    美国零售巨头亚马逊近日首次对外发布了第一款针对卖家和商户的客户端,帮助他们更加高效的管理商品和销售数据. 据美国科技新闻网站 Mashable 报道,之前亚马逊在商户移动客户端方面一直空缺,许多商户不 ...

  8. ASP.NET Web API - 使用 Castle Windsor 依赖注入

    示例代码 项目启动时,创建依赖注入容器 定义一静态容器 IWindsorContainer private static IWindsorContainer _container; 在 Applica ...

  9. Play on Words(欧拉回路)

    Description Some of the secret doors contain a very interesting word puzzle. The team of archaeologi ...

  10. Intense Heat（前缀和或尺取）

    The heat during the last few days has been really intense. Scientists from all over the Berland stud ...