啊,css居中居然是如此的簡單!

2021-09-11 09:40:46 字數 1590 閱讀 1780

寫在前面

css居中方案是乙個老生常談的問題,主要包括水平居中和垂直居中,水平居中大家用的比較多,最常用的莫過於margin:0 auto方案了,而垂直居中,很多時候會讓很多新手頭疼。

常用居中方案(水平)

margin:0 auto解決方案 (水平居中)

適用於已經知道寬度,並且其父級寬度不為0的元素水平居中。

"parent">

"child">哈哈哈哈

.parent

.child

複製**

利用text-align:center使行內元素水平居中(水平居中)

哈哈哈哈

div

複製**

flex水平居中

"parent">

"child">哈哈哈哈

.parent

複製**

絕對定位利用負邊距居中(已知寬度)

"parent">

"child">哈哈哈哈

.parent

.child

複製**

絕對定位不知寬度居中,可以利用css transform屬性,也可以利用flex居中

"parent">

"child">哈哈哈哈

.parent

.child

複製**

垂直居中方案

不知寬高,相容性很高的居中方案。

"parent">

"child">哈哈哈哈

.parent

.child

複製**

利用行高進行居中,行高和高度一致

"parent">

"child">哈哈哈哈

.parent

複製**

flex方案

"parent">

"child">哈哈哈哈

.parent

複製**

transform方案

"parent">

"child">哈哈哈哈

.parent

.child

複製**

已知父級高度,利用margin-top進行居中,該方案過於簡單,就不貼**了

絕對定位,使用負邊距居中

"parent">

"child">哈哈哈哈

.parent

.child

複製**

寫在最後

本文已經列出了大多情況下都可以解決的居中方案,還有一些比較居中,例如浮動元素居中可以參考絕對定位居中,如果不考慮相容性的話,flex居中是最方便的方案,大家可以自由的去根據實際情況去選擇需要的方案

沒錯,css居中就是如此的簡單!

寫在前面 css居中方案是乙個老生常談的問題,主要包括水平居中和垂直居中,水平居中大家用的比較多,最常用的莫過於margin 0 auto方案了,而垂直居中,很多時候會讓很多新手頭疼。常用居中方案 水平 margin 0 auto解決方案 水平居中 適用於已經知道寬度,並且其父級寬度不為0的元素水平...

匪夷所思,居然是記憶體惹的禍

開機通過bios後,螢幕顯示 檔案損壞或者找不到檔案,系統找不到system32 drivers ntfs.sys,建議使用windows啟動盤或者cd安裝盤,在第一屏按 r 進行系統修復。當時就傻眼了,連忙在微軟大牛的指示下,放入系統光碟重啟機器。進入安裝介面後,又顯示什麼奇怪的英文錯誤資訊,大致...

佛教居然是這樣看待「安樂死」的

佛教 如何看待 安樂死 佛教認為一般來說應該採取保護生命的做法,但是各個情形又不相同,所以必須分別地看待。在很多情況中,公式化的答案是不存在的。如果我們知道處在昏迷或極大痛苦中的某個人將會轉生到更為快樂的環境,那麼我們由悲心出發可以考慮使用安樂死的方法。然而,由於我們大多不具備這種神通,所以施行安樂...