"盒子"垂直水平居中方法
2017-10-26 本文已影响0人
var92
方法一:
{height:100px;
width:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-right:-50px;}
方法二:
{height:100px;
width:100px;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
marigin:auto;}
方法三:
{height:100px;
width:100px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);}
方法4:(弹性盒)
结构:
<div class="box">
<div class="item"></div>
</div>
样式:
.box{
width:600px;
height:600px;
display:flex;
justify-content:center;
align-item:center:
margin:0 auto
}