水平居中

行內(nèi)水平居中

行內(nèi)水平居中就直接用text-align: center

塊級(jí)水平居中

直接用margin: auto來實(shí)現(xiàn)

絕對(duì)定位元素的居中

可以是喲經(jīng)left: 50%, margin: 負(fù)固定值來實(shí)現(xiàn)
也可以使用transform: translate(x軸, y軸)來實(shí)現(xiàn)

flex居中

使用justify-content: center來實(shí)現(xiàn), 這個(gè)是主軸

垂直居中

行內(nèi)垂直居中

設(shè)置line-height和height一樣高就好了

絕對(duì)定位元素居中

絕對(duì)定位元素可以使用top: 50%, margin-top: 負(fù)的一半高度
或者直接使用transform: translate(x軸, y軸)來實(shí)現(xiàn)

也可以結(jié)合使用絕對(duì)定位+margin:auto來實(shí)現(xiàn)

margin: auto中的auto意思是自動(dòng)填充滿剩余空間部分

flex居中

使用flex布局來實(shí)現(xiàn) align-items: center ,代表交叉軸, 也就是垂直軸