Web 前端开发 让前端飞

"盒子"垂直水平居中方法

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

上一篇下一篇

猜你喜欢

热点阅读