<!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. 书写可维护的javascript

    内容介绍 编写可维护的代码很重要,因为大部分开发人员都花费大量时间维护他人代码. 1.什么是可维护的代码? 一般来说可维护的代码都有以下一些特征: 可理解性---------其他人可以接手代码并理解它 ...

  2. 亚马逊与Twitter携手电子商务

    亚马逊(Amazon)与Twitter开展了合作,允许用户以Twitter消息的形式将喜欢的商品发送到购物篮中.这些高科技企业正在想办法把社交媒体和电子商务融为一体. 这一功能旨在将Twitter转变 ...

  3. 5.airflow问题

    1. Traceback (most recent call last): File "/usr/bin/airflow", line 28, in <module> ...

  4. spark RDD、DataFrame、DataSet之间的相互转化

    这三个数据集看似经常用,但是真正归纳总结的时候,很容易说不出来 三个之间的关系与区别参考我的另一篇blog  http://www.cnblogs.com/xjh713/p/7309507.html ...

  5. LeetCode 36. Valid Sudoku (C++)

    题目: Determine if a 9x9 Sudoku board is valid. Only the filled cells need to be validated according t ...

  6. 王者荣耀交流协会 -- 第4次Scrum会议

    Scrum master : 王磊 要求1 : 工作照片 照片由高远博同学拍摄 ,王露芝同学(外援)没有参加本次会议. 要求2 : 时间跨度:2017年10月16日 18:00 - 18:44 共计4 ...

  7. 第七次作业PSP

    psp 进度条 代码累积折线图 博文累积折线图 psp饼状图

  8. 《linux内核分析》 第一周

    20135130  王川东 计算机是如何工作的? 计算机的基本原理是存储程序和程序控制.预先要把指挥计算机如何进行操作的指令序列(称为程序)和原始数据通过输入设备输送到计算机内存贮器中.每一条指令中明 ...

  9. [2017BUAA软工]第三次博客作业：案例分析

    第三次博客作业:案例分析 1. 调研和评测 1.1 BUG及设计缺陷描述 主要测试博客园在手机端上的使用情况. [BUG 01] 不能后退到上一界面(IOS) 重现步骤:打开博客首页中任意博文,点击博 ...

  10. Scrum冲刺博客汇总

    第一篇 Scrum冲刺博客 http://www.cnblogs.com/LZTZ/p/8886296.html 第二篇 Scrum冲刺博客 http://www.cnblogs.com/LZTZ/p ...