2022-03-02 div水平并垂直居中的五種方式

1.使用定位實現(xiàn)box1在box里水平并垂直居中:在父元素box里添加:相對定位? position : relative;? ?在子元素添加:絕對定位? position : absolute;? 上下左右為零屏鳍,水平居中两芳。

例:

?2.子元素box1像左移動100px(根據(jù)實際尺寸移動)曙咽,在向Y軸平移100px(根據(jù)實際尺寸移動)竿拆。


?3.彈性盒布局?


?4.給父標(biāo)簽添加行間距: text-align: center;? 和文本垂直居中 line-height: 父標(biāo)簽的高;??

? ?給子標(biāo)簽div轉(zhuǎn)換為行內(nèi)塊元素:display:inline-block;? 和添加垂直居中 vertical-align:middle; (該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊)。

? ?給子標(biāo)簽旁邊添加空span 笨触。

?5.網(wǎng)格布局:在父元素box添加網(wǎng)絡(luò)布局 display: grid; 并給父元素添加水平居中 justify-content:center;

? ? ? ? ? ? ? ? ? ? ? 在子元素box1上添加垂直居中 align-self:center;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末懦傍,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子芦劣,更是在濱河造成了極大的恐慌粗俱,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虚吟,死亡現(xiàn)場離奇詭異寸认,居然都是意外死亡签财,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門偏塞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唱蒸,“玉大人,你說我怎么就攤上這事灸叼∩裥冢” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵古今,是天一觀的道長慎冤。 經(jīng)常有香客問我,道長沧卢,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任醉者,我火速辦了婚禮但狭,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘撬即。我一直安慰自己立磁,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布剥槐。 她就那樣靜靜地躺著唱歧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪粒竖。 梳的紋絲不亂的頭發(fā)上颅崩,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天,我揣著相機與錄音蕊苗,去河邊找鬼沿后。 笑死,一個胖子當(dāng)著我的面吹牛朽砰,可吹牛的內(nèi)容都是我干的尖滚。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼瞧柔,長吁一口氣:“原來是場噩夢啊……” “哼漆弄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起造锅,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤撼唾,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后备绽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體券坞,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡鬓催,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了恨锚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宇驾。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖猴伶,靈堂內(nèi)的尸體忽然破棺而出课舍,到底是詐尸還是另有隱情,我是刑警寧澤他挎,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布筝尾,位于F島的核電站,受9級特大地震影響办桨,放射性物質(zhì)發(fā)生泄漏筹淫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一呢撞、第九天 我趴在偏房一處隱蔽的房頂上張望损姜。 院中可真熱鬧,春花似錦殊霞、人聲如沸摧阅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽棒卷。三九已至,卻和暖如春祝钢,著一層夾襖步出監(jiān)牢的瞬間比规,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工拦英, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留苞俘,地道東北人。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓龄章,卻偏偏與公主長得像吃谣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子做裙,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容