（固定定位）设置元素相对浏览器可视窗口水平居中，垂直居中

设置元素相对浏览器可视窗口水平居中，垂直居中的两种方法

<div class="box">
   123
</div>

方法一：让box中心与浏览器中心在同一位置，

 

 

 

.box{
    width:200px;
    height:200px;
    background: #f00;
    position: fixed;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px
   }

方法二：(五马分尸法）：各方向力度相同

 

 

 

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