設(shè)置子元素在一個(gè)不清楚寬高的父元素中垂直居中

通過以下兩種方法便可以實(shí)現(xiàn)垂直居中的操作了,并且可以實(shí)現(xiàn)子元素在一個(gè)不清楚寬高的父元素中垂直居中的效果。?

方法1. 使用定位和負(fù)margin可以實(shí)現(xiàn)。?

(缺點(diǎn):這種方法可以不用知道父元素的寬高,但是必需得知道子元素的寬高才可以設(shè)置)


方法 2. 使用彈性盒子flexbox進(jìn)行布局。?

做法:只需要給父元素設(shè)置三條屬性值(display: flex;justify-content: center;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),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,189評(píng)論 1 92
  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,834評(píng)論 0 26
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,741評(píng)論 0 6
  • 使用 CSS 實(shí)現(xiàn)居中效果困難嗎?顯然不是。實(shí)際上有許多方法可以實(shí)現(xiàn)居中效果,但在具體情況中,我們往往無法判斷哪種...
    啊啊啊滿閱讀 350評(píng)論 0 0
  • 剛剛讀完《為什么精英都是清單控》顯而易見,這是一本推薦清單的書籍。 全書分為八章,首先介紹了清單的好處,然...
    不門體驗(yàn)閱讀 473評(píng)論 0 0

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