（固定定位）設置元素相對瀏覽器可視窗口水平居中，垂直居中

設置元素相對瀏覽器可視窗口水平居中，垂直居中的兩種方法

<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;
   }