一、使用定位加margin的方式:
将子元素开启定位,然后top,left设置为50%,然后margin-top和margin-left设置为负数,大小分别为该元素高和宽的一般,当然,也可以直接设置top为(50%父元素-子元素height/2),left为(50%父元素-子元素width/2)
二、使用弹性盒
为父元素开启弹性盒,然后设置justify-content和align-item为center;
三、用table和table-cell
将父元素设置为display:table
子元素为table-cell,
然后用vertical-align:middle,text-align:center;
四、伪元素法
为父元素::after或者::before设置为
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
为子元素设置为
display:inline-block;
vertical-align:middle;
伪元素可以用一个空的span代替,但是没必要,节省一个元素。
五、使用动画:
即子元素开启绝对定位,然后top:50%,left:50%,transform:translate(-50%,-50%)