.container{
                            border: 1px solid #ff8c2e;
                            display: block;
                        }
                        .content1{
                            background-color: #ff8c2e;
                            width: 200px;
                            height: 200px;
                            margin: auto;
                        }
                    
                

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            display: block;
                        }
                        .content2{
                            background-color: #ff8c2e;
                            display: table;
                            // 否则 inline/inline-block 都是 宽度自适应，
                            // 但是margin:auto无效
                            // dispaly:table ie6/7不支持，要用标签代替
                            margin: auto;
                        }
                    
                

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            display: block;
                            text-align: center;
                            // text-align 居中可以左右的行内元素上
                        }
                        .content3{
                            background-color: #ff8c2e;
                            display: inline-block;
                            //inline也可以，但是内部只是能行内元素(包括inline-block),不能是块级元素，
                            //否则块级元素溢出改行内元素
                            //ie6/7不支持 inline-block 但是可以通关inline + zoom:1代替
                        }
                    
                

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            position: relative;
                            height: 200px;
                            //因为绝对定位脱离文档流，故父元素要有高度才能包裹
                        }
                        .content4{
                            background-color: #ff8c2e;
                            width: 200px;
                            position: absolute;
                            left: 50%;
                            margin-left: -100px;
                        }

                    
                

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            position: relative;
                            height: 200px;
                            //因为绝对定位脱离文档流，故父元素要有高度才能包裹
                        }
                        .content4{
                            background-color: #ff8c2e;
                            position: absolute;
                            //绝对定位元素还有个特点，会包裹，自适应大小
                            left: 50%;
                            transform: translateX(-50%);
                            // 相对于元素自己的大小 IE9>=才支持
                        }

                    
                

                    
                        .container{
                            border: 1px solid #ff8c2e;
                            display: flex;
                            justify-content: center;
                            //两个属性都是定义在伸缩容器上
                            // IE9/10才支持，并且部分浏览器要-webkit- -ms-开头
                        }
                        .content4{
                            background-color: #ff8c2e;
                            //margin: auto 可以代替父元素中的justify-content:center
                        }