综合一

自我介绍

左固定右自适应布局

这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 
现在我们来看下HTML布局：

<div id="outer">

  <div id="sidebar" style="height:240px;">固定宽度区div>

  <div id="content" style="height:340px;">自适应区div>

div>

<div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形div>

下面讲一下常见的方法： 
1、将左侧div浮动，右侧div设置margin-left。

       .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            float:left;

        }

        .content{

            margin-left: 300px;

            height: 100px;

            background-color: blue;

        }

        .footer{

            background-color: red;

        }

        .outer:after{

            display: block;

            content:'';

            clear: both;

            visibility: hidden;

        }

        .outer{

            zoom:1;

        }

效果图如下： 

大家要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。

当然我们不能让他填满了，填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在左边，所以我们设置content的margin-left值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是300.

假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-300，此时content发现自己的宽度可以与sidebar挤在同一行了，于是他就上来了。

而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也就会变——比如我们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-300始终是不会变的。

这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响.

但实际上这个方法有个限制——html中sidebar必须在content之前！ 
如果siderbar当到了content后面，就会出现如下的效果： 

但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。

但如果sidebar在content之后，那上面的一切都会化为泡影。

可能有的人不理解，说你干嘛非要sidebar在后面呢？这个问题说来话长，反正问题就是——content必须在sidebar之前，但content宽度要自适应，怎么办？接着往下看。

2、固定区采用绝对定位，自适应区仍然设置margin。 
CSS代码如下：

        .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            position: absolute;

            top:0;

            left: 0;

 

        }

        .content{

            height: 100px;

            background-color: blue;

        }

        .footer{

            background-color: red;

        }

 

        .outer{

            position: relative;

        }

效果图： 

可以发现，此时下面的红色div受影响了。其实这与footer无关，而是因为outer对sidebar的无视造成的。看来这种定位方式只能满足sidebar自己，但对他的兄弟们却毫无益处。

3、标准浏览器的方法 
当然，以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了：把outer设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度，那么content的宽度就变成自适应了。 
对应的CSS代码

       .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            display:table-cell;

 

        }

        .content{

            height: 100px;

            background-color: blue;

            display:table-cell;

        }

        .footer{

            background-color: red;

        }

 

        .outer{

            display: table;

            width:100%;

        }

不过这种做法，如果sidebar写在content前面，sidebar会固定在左侧，否则固定在右侧。 
HTML：

<div class="outer">

    <div class="sidebar">

        sidebar固定区域

    div>

    <div class="content">

        content自适应区域

    div>

div>

<div class="footer">

    后面的一个DIV，以确保前面的定位不会导致后面的变形

div>

代码很少，而且不会有额外标签。不过这是IE7都无效的方法。

———————再说一点————————

如果不考虑ie7及以下版本，则使用标准方法；如果不在意sidebar与content的顺序，则用第一种方法；如果不考虑对其他兄弟元素的影响，用第3种方法。

以上代码都没在IE6测试，有问题不负责解释。让IE6寿终正寝的办法就是——从此不再理他。

左边定宽，右边自适应布局的几种方法

实际的页面开发中经常会遇到左边定宽，右边自适应的需求，特别是一些管理系统，比如左边显示信息或操作列表，右边显示详情，如下所示：、

 

 针对这种布局，首先抽象出页面结构如下：

 

 1 

 2 

 3 

 4     

 5     

 6     

28 

29 

30     

31     
Left

32     

33     
Right

34 

35 

 

 

浏览器中效果：

 

需要实现的效果如下：

 

那么针对这种常见的布局，方式是非常多的，下面给出几种比较简单和常见的方法。

 

方法一：左边设置左浮动，右边宽度设置100%

【分析】这样的方式简单得让我怀疑，但是效果上确实是实现了。

 

方法二： 父容器设置 display：flex；Right部分设置 flex：1 

【分析】display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。

 

方法三：设置浮动 + 在 css 中使用 calc() 函数

【分析】

1. 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）

2. calc() = calc(四则运算) 用于在 css 中动态计算长度值，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

3. vw： viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,

同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。

浏览器支持情况： 主流浏览器、IE10+ 

vw 和 vh 会随着viewport 的变化而变化，因此十分适合于自适应场景来使用。

 

方法四：使用负margin

首先修改页面结构，为自适应部分添加容器 .container, 同时改变左右部分的位置，如下：

 

设置样式：

【分析】

1. 首先设置左边部分和右边部分左浮动，并为自适应部分（Right）设置宽度100%。此时的效果是这样的：

2. 设置左边部分左外边距为负100%，此时效果如下：

但是右边部分的宽度仍然为100%，部分内容被 Left 所覆盖。

3. 为 Right 部分添加左边距（即 Left 部分的宽度）

此时可以看到，Right 部分的内容居中显示了。

 

 

清除浮动的方式

在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了，下面总结8种清除浮动的方法，测试已通过 ie chrome firefox opera，需要的朋友可以参考下

清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 

下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）： 

1，父级div定义 height 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 
div2 

 

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 

优点：简单、代码少、容易掌握 

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 

建议：不推荐使用，只建议高度固定的布局时使用 

2，结尾处加空div标签 clear:both 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 

 
div2 

 

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 

优点：简单、代码少、浏览器支持好、不容易出现怪问题 

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 

3，父级div定义 伪类:after 和 zoom 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 
div2 

 

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 

建议：推荐使用，建议定义公共类，以减少CSS代码。 

4，父级div定义 overflow:hidden 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 
div2 

 

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 

优点：简单、代码少、浏览器支持好 

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。 

5，父级div定义 overflow:auto 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 
div2 

 

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 

优点：简单、代码少、浏览器支持好 

缺点：内部宽高超过父级div时，会出现滚动条。 

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 

6，父级div 也一起浮动 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 
div2 

 

原理：所有代码一起浮动，就变成了一个整体 

优点：没有优点 

缺点：会产生新的浮动问题。 

建议：不推荐使用，只作了解。 

7，父级div定义 display:table 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 
div2 

 

原理：将div属性变成表格 

优点：没有优点 

缺点：会产生新的未知问题。 

建议：不推荐使用，只作了解。 

8，结尾处加 br标签 clear:both 
 

复制代码

代码如下:

 

 

Left

 

Right

 

 

 

 
div2 

 

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both 

建议：不推荐使用，只作了解。

 

Js继承

大多OO语言都支持两种继承方式： 接口继承和实现继承 ，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现，下文给大家技术js实现继承的六种方式，需要的朋友参考下

 

前言：大多OO语言都支持两种继承方式： 接口继承和实现继承 ，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠 原型链 来实现。

1.原型链

基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

原型链实现继承例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function subType() { this.property = false; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this.property; } var instance = new SubType(); console.log(instance.getSuperValue());//true

2.借用构造函数

基本思想：在子类型构造函数的内部调用超类构造函数，通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子：

?

1 2 3 4 5 6 7 8 9 10 11

function SuperType() { this.colors = ["red","blue","green"]; } function SubType() { SuperType.call(this);//继承了SuperType } var instance1 = new SubType(); instance1.colors.push("black"); console.log(instance1.colors);//"red","blue","green","black" var instance2 = new SubType(); console.log(instance2.colors);//"red","blue","green"

3.组合继承

基本思想：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式。

例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function SuperType(name) { this.name = name; this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function() { console.log(this.name); } function SubType(name, age) { SuperType.call(this,name);//继承属性 this.age = age; } //继承方法 SubType.prototype = new SuperType(); Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() { console.log(this.age); } var instance1 = new SubType("EvanChen",18); instance1.colors.push("black"); consol.log(instance1.colors);//"red","blue","green","black" instance1.sayName();//"EvanChen" instance1.sayAge();//18 var instance2 = new SubType("EvanChen666",20); console.log(instance2.colors);//"red","blue","green" instance2.sayName();//"EvanChen666" instance2.sayAge();//20

4.原型式继承

基本想法：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型。

原型式继承的思想可用以下函数来说明：

?

1 2 3 4 5

function object(o) { function F(){} F.prototype = o; return new F(); }

例子：

?

1 2 3 4 5 6 7 8 9 10 11

var person = { name:"EvanChen", friends:["Shelby","Court","Van"]; }; var anotherPerson = object(person); anotherPerson.name = "Greg"; anotherPerson.friends.push("Rob"); var yetAnotherPerson = object(person); yetAnotherPerson.name = "Linda"; yetAnotherPerson.friends.push("Barbie"); console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

ECMAScript5通过新增Object.create()方法规范化了原型式继承，这个方法接收两个参数：一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。

?

1 2 3 4 5 6 7 8 9 10 11

var person = { name:"EvanChen", friends:["Shelby","Court","Van"]; }; var anotherPerson = Object.create(person); anotherPerson.name = "Greg"; anotherPerson.friends.push("Rob"); var yetAnotherPerson = Object.create(person); yetAnotherPerson.name = "Linda"; yetAnotherPerson.friends.push("Barbie"); console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

5.寄生式继承

基本思想：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。

例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert("hi"); }; return clone; } var person = { name:"EvanChen", friends:["Shelby","Court","Van"]; }; var anotherPerson = createAnother(person); anotherPerson.sayHi();///"hi"

6.寄生组合式继承

基本思想：通过借用函数来继承属性，通过原型链的混成形式来继承方法

其基本模型如下所示：

?

1 2 3 4 5

function inheritProperty(subType, superType) { var prototype = object(superType.prototype);//创建对象 prototype.constructor = subType;//增强对象 subType.prototype = prototype;//指定对象 }

例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function SuperType(name){ this.name = name; this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function (){ alert(this.name); }; function SubType(name,age){ SuperType.call(this,name); this.age = age; } inheritProperty(SubType,SuperType); SubType.prototype.sayAge = function() { alert(this.age); }

以上内容给大家介绍了javascript实现继承的六种方式，希望对大家有所帮助！

1.js原型（prototype）实现继承

代码如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

2.构造函数实现继承 

代码如下:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

3.call , apply实现继承         -----很方便！

代码如下:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

 

怎么去除url地址的参数

javascript 删除 url 中指定参数,并返回 url

前言

在之前写了一篇博文《javascript 操作 url 中 search 部分方法函数》.在这篇博文里面,我们通过写好的函数可以对url中的各种参数进行查询,设置.唯独,忘记了删除.

而今天就是遇到要删除某个参数的问题.郁闷,于是,写了这个函数.

实现代码

// 删除url中某个参数,并跳转

function funcUrlDel(name){

    var loca = window.location;

    var baseUrl = loca.origin + loca.pathname + "?";

    var query = loca.search.substr(1);

    if (query.indexOf(name)>-1) {

        var obj = {}

        var arr = query.split("&");

        for (var i = 0; i < arr.length; i++) {

            arr[i] = arr[i].split("=");

            obj[arr[i][0]] = arr[i][1];

        };

        delete obj[name];

        var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");

        return url

    };

}

功能:删除url中指定的参数,并返回删除参数后的完整url

使用方法

示例

url: http//xx.com/list?page=1&a=5

执行代码

funcUrlDel("page")

返回

http//xx.com/list?a=5

其他说明

会忽略 hash 值,如果需要,自行加上即可.

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作，下面通过文字说明加代码分析的形式给大家解析，具体详情请看下文。

1、jquery获取url很简单，代码如下：

复制代码代码如下:

window.location.href;

 

其实只是用到了javascript的基础的window对象，并没有用jquery的知识。

2、jquery获取url参数比较复杂，要用到正则表达式，所以学好javascript正则式多么重要的事情

首先看看单纯的通过javascript是如何来获取url中的某个参数：

?

1 2 3 4 5 6

//获取url中的参数 function getUrlParam(name) {  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象  var r = window.location.search.substr(1).match(reg); //匹配目标参数  if (r != null) return unescape(r[2]); return null; //返回参数值 }

 

通过这个函数传递url中的参数名就可以获取到参数的值，比如url为

http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx

我们要获取reurl的值，可以这样写：

复制代码代码如下:

var xx = getUrlParam('reurl');

明白了javascript获取url参数的方法，我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数，下面的代码为jquery扩展了一个getUrlParam()方法

?

1 2 3 4 5 6 7

(function ($) {   $.getUrlParam = function (name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");    var r = window.location.search.substr(1).match(reg);    if (r != null) return unescape(r[2]); return null;   }  })(jQuery);

为jquery扩展了这个方法了之后我们就可以通过如下方法来获取某个参数的值了：

  

复制代码代码如下:

 var xx = $.getUrlParam('reurl');

完整代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

2014-4-23 修改

今天在用上面的方法获取url中的参数时，url中传递的中文参数在解析的时候无论怎么测试，获取的都是乱码。经过一番调试后发现，我再传递参数时，对汉字编码使用的是 encodeURI ，而上面的方法在解析参数编码时使用的是unescape ,修改为 decodeURI 就可以了。

附： W3School中的介绍：

JavaScript unescape() 函数

unescape() 函数可对通过 escape() 编码的字符串进行解码。

参数	描述
string	必需。要解码或反转义的字符串。

说明

该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

提示和注释

注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

综上： javascript对参数编码解码方法要一致：

escape()   unescape()

encodeURI()   decodeURI()

encodeURIComponent()    decodeURIComponent() 

网上找的另一种javascript获取url中参数的方法：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

 jquery 取url参数和在url加参数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

(function ($) {  $.extend({   Request: function (m) {    var sValue = location.search.match(new RegExp("[\?\&]" + m + "=([^\&]*)(\&?)", "i"));    return sValue ? sValue[1] : sValue;   },   UrlUpdateParams: function (url, name, value) {    var r = url;    if (r != null && r != 'undefined' && r != "") {     value = encodeURIComponent(value);     var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");     var tmp = name + "=" + value;     if (url.match(reg) != null) {      r = url.replace(eval(reg), tmp);     }     else {      if (url.match("[\?]")) {       r = url + "&" + tmp;      } else {       r = url + "?" + tmp;      }     }    }    return r;   }    }); })(jQuery);

使用方法

dev.zhang.com/IOF.Signup/index_uscn_chs.html?act=1

1、取值使用

$.Request("act") = 1

2、url加参数

$.UrlUpdateParams(window.location.href, "mid", 11111),

结果window.location.href?mid=11111

 

盒子居中

布局中经常会遇到让一个盒子水平且垂直居中的情况，以下总结了几种居中方法：

1. margin固定宽高居中
2. 负margin居中
3. 绝对定位居中
4. table-cell居中
5. flex居中
6. transform居中
7. 不确定宽高居中（绝对定位百分数）
8. button居中

不兼容IE低版本的可以用其他方法hack。

不多说，直接上代码：
大多数方法的html都相同，所以写一个了，不同的再单独写出来。

（demo中有代码和效果）

HTML:

   

id="container">

       

id="box">

   

• margin固定宽高居中

这种定位方法，纯粹是靠宽高和margin拼出来的，不灵活。

CSS:

#container {

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    width: 200px;

    height: 200px;

    margin: 150px 200px;

    background-color: #0ff;

}

点击查看demo

• 负margin居中

利用负的margin来进行居中，需要知道固定宽高，限制比较大。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    width: 200px;

    height: 200px;

    left: 50%;

    top: 50%;

    margin: -100px -100px;

    background-color: #0ff;

}

点击查看demo

• 绝对定位居中

利用绝对定位居中，非常常用的一种方法。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    width: 200px;

    height: 200px;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    background-color: #0ff;

}

点击查看demo

• table-cell居中

利用table-cell来控制垂直居中。

CSS:

#container {

    display: table-cell;

    width: 600px;

    height: 500px;

    vertical-align: middle;

    border: 1px solid #000;

}

#box {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: #0ff;

}

点击查看demo

• flex居中

CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

CSS:

#container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

            align-items: center;

    -webkit-justify-content: center;

            justify-content: center;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    width: 200px;

    height: 200px;

    background-color: #0ff;

}

点击查看demo

• transform居中

这种方法灵活运用CSS中transform属性，较为新奇。缺点是IE9下不兼容。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 600px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: relative;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    background-color: #0ff;

}

点击查看demo

• 不确定宽高居中（绝对定位百分数）

这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

CSS:

 #container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    left: 30%;

    right: 30%;

    top: 25%;

    bottom: 25%;

    background-color: #0ff;

}

点击查看demo

• button居中

利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

HTML:

   

CSS:

button {

    width: 600px;

    height: 500px;

    border: 1px solid #000;

}

div {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: #0ff;

}

说到让一个div水平居中，立马想到最常用的就是margin:0 auto;但是这个的前提是必须知道盒子的宽度，盒子居中主要有两种情况：

一.确定盒子的宽度，解决办法有：

1.1 margin:0 auto;

1.2   position:relative;left:50%;margin-left:-0.5*width;(用绝对定位也可以)

二.不确定盒子宽度的，而且盒子宽度可变的，方法如下

2.1 position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;

2.2 width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;

1.第一种

利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30

div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

按 Ctrl+C 复制代码

 

第一种

第2种

利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置

 

第二种

第三种

【】【】还是用css的position属性，如下的html