五、块全屏居中

如何使得块元素全屏居中，这里有两种方法，下面进行一一描述：

1、在已知块元素的宽和高的情况下：

.css{
position:absolute;
height:块高；
块宽;
top:50%;
margin-top:-块高/2;
left:50%;
margin-left:-块宽/2;
}

下面举例说明，如下图图片所示，小狗狗的图片上下左右居中：

<body class="Site">
    <div class="Media">
        <img class="Media-figure" src="images/test.jpg" alt="">
    </div>
</body>

 body{
         background: rebeccapurple;
     }
      .Media{
          height: 100px;
          width: 180px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -50px;
          margin-left: -90px;

      }
      .Media img{
        width: 100%;   
      }

2、在不知道元素的宽和高的情况下：

使用transform,将上面类Media改成下面这样也可实现。

.Media {    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

3、块居中常识

　　a)、使用margin:0 auto（position：relative和不进行定位）

　　　　使用这种方法居中,定位的时候position不能是absolute。原因：已经绝对定位了，所以无法使用margin：0 auto属性。

　　position:absolute；如何居中块？

width用%显示，如果外层是100%，块为80%，居中的方法为左右margin 为10%,即：margin-left:10%;margin-right:10%;
width用像素显示，同一的方法，相减然后除以2为margin左右的属性值。

b)、使用margin:0 auto，可以使用的前提是：position不是absolute和fixed