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

2021-09-13 10:01:59 字數 1319 閱讀 7625

寫在前面

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

常用居中方案(水平)

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

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

.parent

.child

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

哈哈哈哈

div

3.flex水平居中

哈哈哈哈

.parent

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

哈哈哈哈

.parent

.child

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

哈哈哈哈

.parent

.child

垂直居中方案

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

哈哈哈哈

.parent

.child

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

哈哈哈哈

.parent

3.flex方案

哈哈哈哈

.parent

4.transform方案

哈哈哈哈

.parent

.child

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

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

哈哈哈哈

.parent

.child

寫在最後

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

沒錯預載入就是這麼簡單

之前專案中遇到載入問題,首先想到非同步載入 接著想用什麼框架,框架很多,我用的是volley,感覺挺方便的,廢話不多說,記錄一下自己的錯誤然後接著前行,用volley的時候雖然出現了效果,但是在出現預設之前還是出現幾秒讓人難以忍受的空白,不得不靠。上 在刷屏頁 建立任務 private void g...

css居中控制 水平居中 垂直居中

ul li橫排 ul li.container container ul.container listyle container container ul.container listyle 水平居中 1.如果被設定的元素是行內元素 text img 給父元素設定text align center即...

css 垂直居中

先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...