让CSS里div上下左右绝对居中几种方式

2021-09-03 来源：星星旅游

让CSS⾥div上下左右绝对居中⼏种⽅式

1、绝对定位（常⽤于登录模块）备注：前提条件div需要有宽⾼

#css.box{

position:absolute/fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

2、margin负值

备注：前提条件div需要有宽⾼

#css.box{

width:200px;height: 200px;position: absolute;left:50%;top:50%;

margin-left:-100px;margin-top:-100px;}

3、css3 transform

备注：⽤于不确定当前div的宽度和⾼度

#css.box{

position: absolute;left:50%;top:50%;

transform: translate(-50%, -50%);}

4、flex 布局⽅式

child

#css.box{

display:flex;

align-items:center;justify-content:center;}

5、table-cell ⽅式

child

#css.box{

display: table-cell;vertical-align: middle;text-align: center;}

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文