实现水平垂直居中

定位实现水平垂直居中

使用定位来实现水平垂直居中有4种方法

1.

.box{
                width: 200px；
                height: 200px；
                background: #000；
                position: absolute；             //此处定位固定定位和绝对定位都可以
                top: calc(50% - 100px)；
                left: calc(50% - 100px)；         }

---

2.

.box{
               width: 200px;
               height: 200px;
               background: #000;
               position: absolute;
               top: 50%;
               margin-top: -100px;              //减去盒子本身高度的一半
               left: 50%;
               margin-left: -100px;              //减去盒子本身宽度的一半



}

---

3.

.box{
                width: 200px;
                height: 200px;
                background: #000;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                //transform：css3新属性 转换变化
                // translate：平移，相对自己本身平移

}

---

4.

.box{
                width: 200px;
                height: 200px;
                background: #000;
                margin:auto;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
 }