如何使得塊元素全屏居中，這裡有兩種方法，下麵進行一一描述： 1、在已知塊元素的寬和高的情況下： 下麵舉例說明，如下圖圖片所示，小狗狗的圖片上下左右居中： 2、在不知道元素的寬和高的情況下： 使用transform,將上面類Media改成下麵這樣也可實現。 3、塊居中常識 a)、使用margin:0 ...
如何使得塊元素全屏居中，這裡有兩種方法，下麵進行一一描述：
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左右的屬性值。
