對於PC和mobile 水平垂直居中適配

2021-07-10 20:39:22 字數 700 閱讀 8648

div

對於pc的乙個div居中應該是沒什麼問題的

這樣就居中了

但是如果要適配移動端的話,這個div可能就會顯得比較大,一般情況下左右兩邊會超出螢幕。

最好的辦法應該把width設為100%,這樣就能適配各種的解析度。

所以我做了以下更改

div

貌似這樣就可以解決問題了

但問題又來了,當頁面的寬度小於500px的時候,比如400px,卻要向左移動250px,按照left:50%來算應該從200開始減去250,所以是-50px

所以適配又出了問題

那麼我們要怎麼做呢?

這個時候我突然想到

margin: 0 auto;
可以水平居中但不能垂直居中。

然後就把這段**放了上去。

怎麼調都沒辦法居中。

然後突然想到乙個解決方法:

使用

position: relative;

margin: 0 auto;
相結合來做

html,body

div
這樣就適配移動和pc的所有解析度了!

垂直和水平居中

parent child demo div div parent style table水平垂直居中 table cell text align vertical align inline block parent child demo div div parent child style abso...

垂直拆分和水平拆分

前言 做資料庫分表的時候,總是能看到水平切分 垂直切分,但是並不能理解何為水平 何為垂直。僅此做個記錄。一般情況下說的水平切分 垂直切分,都是指的資料庫層面的。隨著業務量的增加,資料量肯定快速增長,拿mysql來說,單錶資料量在百萬級內讀取效率還是可以的,可是一旦達到千萬級,效能會有較大的降低。如果...

水平拆分和垂直拆分

網際網路時代談論最多的話題就是拆分。拆分一般分為水平拆分和垂直拆分,這並不單指對資料庫或者快取的拆分,主要是表達一種分而治之的思想。水平拆分是指由於單一節點無法滿足需求,需要擴充套件為多個節點,多個節點具有一直的功能,組成乙個服務池,乙個節點服務一部分請求量,所有節點共同處理大規模高併發的請求量。垂...