水平垂直居中

盒子居中

1-position

		.father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;            
            position: relative;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;            
            position: absolute;
            
            /*1、上下左右*/
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            
            /*2、下拉父的一半*/
            margin: 50%; /*margin百分数相对于父级*/
            transform: translate(-50%,-50%); /*translate百分数相对于自己*/
            
            /*3、下拉父的一半-2*/
            left:50%;  /*left、top百分数相对于父级 */       
            top:50%;
            transform: translate(-50%,-50%);
            
            /*4、下拉父的一半-3*/
            margin: 50%;
            left: -150px;/*这里不可百分比*/
            top: -150px;                     
            
            /*5、下拉父的一半-4*/
            left:50%;
            top:50%;
            margin-top: -150px;
            margin-left: -150px;
            
            /*6、计算*/
            left: 100px;
            top: 100px;
            
            /*7、计算-2*/
            position: absolute;/* 定位可以解决塌陷 */
            margin: 100px 100px;
        

2-display

	/*1- display: table-cell;*/
	 	.father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;            
            display: table-cell;/*就是这里*/
            vertical-align: middle;/*就是这里*/
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;           
            margin: auto;
        }
    /*2- display: flex;*/
		.father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;
        }
   /*3- display：float;*/
		.father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;
            display: float;/*子元素这里*/
            transform: translate(100px ,100px);
        }

11、

     .father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;
            margin:0 auto; /*这里*/
            transform: translateY(100px); /*这里*/
        }

12、

	.father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            text-align: center; /*水平居中之后再辅助移动调整垂直*/
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;
            display: inline-block;
            margin-top: 100px;
        }

扩展：position：fixed；不适合做居中

		.father{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            position: relative;
            margin:100px auto;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: brown;
            position: fixed; /* 固定定位 相对浏览器窗口？ */
            left:100px;
            top: 100px;
        }

ES5和ES6除了写法外还有什么区别？

1. class声明有提升

let foo = new Foo();// ReferenceError: Cannot access 'Foo' before initialization
class Foo{
	constructor() {
		this.foo = 42;
	}
}					

2. class声明内部会启用严格模式

class Foo{
	constructor(){
		foo1 = 42;//ReferenceError: foo1 is not defined
	}
}
let foo = new Foo();

3. class的所有方法都没有原型对象prototype，也没有[[constructor]]，不能使用new来调用

class Foo{
	constructor(){
		this.foo = 42;
	}
	show(){
		console.log("show");
	}
}
let f1 = new Foo();//实例化对象和方法之间没有连线
new f1.show();//f1.show is not a constructor

function Foo(){
	this.foo = 42;
	this.show = function(){
		console.log("show");
	}
}
let f1 = new Foo();
new f1.show()//show

4. class声明的必须要new

class Foo{
	constructor(){
		this.foo = 42;
	}
	show(){
		console.log("show");
	}
}
let f1 = Foo();//Class constructor Foo cannot be invoked without 'new'

function Foo(){
	this.foo = 42;
	this.show = function(){
		console.log("show");
	}
}
let f1 = Foo();//无返回是f1是undfind，不报错，但是不是实例化对象
f1.show();//Cannot read property 'show' of undefined