五、块全屏居中

2018-06-24 01:43:39来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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


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

.css{
position:absolute;
height:块高;
width:块宽;
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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【博客园皮肤】简洁响应式博客源码分享

下一篇:vertical-align 和 img属性 和 鼠标样式