css實(shí)現(xiàn)元素居中

水平居中

行內(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 ,代表交叉軸, 也就是垂直軸

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 網(wǎng)頁布局中,元素水平居中比垂直居中簡單不少,同時(shí)實(shí)現(xiàn)水平垂直居中也不難,難的是想出多種實(shí)現(xiàn)水平垂直居中的方法并從中...
    _Dot912閱讀 2,176評(píng)論 6 10
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,110評(píng)論 1 92
  • 收聽音頻,戳鏈接,舊號(hào)itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號(hào)可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,346評(píng)論 3 30
  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,824評(píng)論 0 26
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,429評(píng)論 0 11

友情鏈接更多精彩內(nèi)容