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

方法一:

{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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。