常用居中方法记录

Posted 2020-07-25 庞永胜

1.相对定位

（1）在父元素中使用text-align:center;

（2）使用margin:auto;

2.绝对定位

（1）通过设置left，top偏移量和负边距实现居中

　　　width:[width]; height:[height];

　　　　position:absolute;

　　　　left:50% top:50px;

　　　　margin-left:-[width];

　　　　margin-top:-[height];

（2）通过偏移和css位移实现（css3版）

　　position: absolute; left: 50%; top: 50%;
　　transform: translate(-50%, -50%);

（3）通过设置四个偏移量和外边距自动实现居中（水平+垂直）

　　width:[width]; height:[height];

　　position: absolute;

　　left: 0; top: 0; right: 0; bottom: 0;
　　margin: auto;