如何使得块元素全屏居中，这里有两种方法，下面进行一一描述：
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左右的属性值。