方法1:

div絕對(duì)定位水平垂直居中【margin 負(fù)間距】? ? 這或許是當(dāng)前最流行的使用方法。

div{

? ? ? ? ? ? width:200px;

? ? ? ? ? ? height: 200px;

? ? ? ? ? ? background:green;

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? left:50%;

? ? ? ? ? ? top:50%;

? ? ? ? ? ? margin-left:-100px;

? ? ? ? ? ? margin-top:-100px;

? ? ? ? }

方法2:

div絕對(duì)定位水平垂直居中【margin:auto實(shí)現(xiàn)絕對(duì)定位元素的居中】

div{

? ? ? ? ? ? width: 200px;

? ? ? ? ? ? height: 200px;

? ? ? ? ? ? background: green;

? ? ? ? ? ? position:absolute;

? ? ? ? ? ? left:0;

? ? ? ? ? ? top: 0;

? ? ? ? ? ? bottom: 0;

? ? ? ? ? ? right: 0;

? ? ? ? ? ? margin: auto;

? ? ? ? }

方案3:

div絕對(duì)定位水平垂直居中【Transforms 位移】

div{

? ? ? ? ? ? width: 200px;

? ? ? ? ? ? height: 200px;

? ? ? ? ? ? background: green;

? ? ? ? ? ? position:absolute;

? ? ? ? ? ? left:50%;/* 定位父級(jí)的50% */

? ? ? ? ? ? top:50%;

? ? ? ? ? ? transform: translate(-50%,-50%); /*自己的50% */

? ? ? ? }

方案4:

flex彈性布局居中

.box{

? ? ? ? ? ?? height:600px;

? ? ? ? ? ?? display: -webkit-flex;

? ? ? ? ? ? ?display: flex;

? ? ? ? ? ?? justify-content:center;

? ? ? ? ? ?? align-items:center;

? ? ? ? }