<!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. json简单操作

    通过内置的json模块对json数据进行编码 1.对数据进行编码(dumps) import json #使用dumps将python数据结构转换为json data = { , "name ...

  2. Scrapy爬去哪儿~上海一日游门票并存入MongoDB数据库

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZwAAAGGCAYAAABPDDfEAAAgAElEQVR4nOy9C3Rb1Z3/+z1Hkm35mT

  3. 人脸检测及识别python实现系列（5）——利用keras库训练人脸识别模型

    人脸检测及识别python实现系列(5)——利用keras库训练人脸识别模型 经过前面稍显罗嗦的准备工作,现在,我们终于可以尝试训练我们自己的卷积神经网络模型了.CNN擅长图像处理,keras库的te ...

  4. Unity3D之AR开发（二）

    上一篇给大家介绍了高通AR的使用,接下来给大家分享一下EasyAR EasyAR引擎简介 EasyAR是做好用的且免费的增强现实(Augmented Reality)引擎,EasyAR为Unity开发 ...

  5. jquery中国地图插件

    插件下载地址: http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js jsMap 项目介绍 这是一个功 ...

  6. [T-ARA][HOLIDAY]

    歌词来源:http://music.163.com/#/song?id=22704407 HOLI HOLI DAY [HOLI HOLI DAY] 뚜뚜 뚜루루 [ddu-ddu ddu-lu-lu ...

  7. .NET 4.0 Tuple 元组

    Tuple是.NET 4.0的新特性,主要功能是动态返回数据结构,也可以用做临时数据结构. 原来做一些功能时需要一个方法返回几个值,有两种方法: 1. 非常难看.难用的OUT参数: 2. 新写一个实体 ...

  8. 常用的os操作方法

    os.sep可以取代操作系统特定的路径分隔符.windows下为 “”os.name字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix' ...

  9. centos上搭建git服务--2

    在 Linux 下搭建 Git 服务器   环境: 服务器 CentOS6.6 + git(version 1.7.1)客户端 Windows10 + git(version 2.8.4.window ...

  10. Linux下使用vim编辑C程序

    这几天在系统能力班自学linux,加上最近大数据课上开始使用linux,我在这里总结一下,linux下使用vim编辑c程序的一些问题. 大数据课上是直接使用micro来编辑的,我这里只是简单的说明一下 ...