HTML 中 div不定寬度如何實現水平居中

觸前端的小伙伴們，相信大家對盒子水平居中再熟悉不過了，盒子水平居中的兩個缺一不可的條件為：寬度和margin:0 auto;

然而進一步推想盒子水平垂直居中怎么實現呢，同樣我們可以借助定位以及top：50%和left：50%加margin-left和margin-right的值設置為寬度的一般加負號。

兩者都ok了，那么我們再來想一下如果一個盒子不確定寬度怎么實現讓它水平居中呢？

具體可見如下代碼：

想學習更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。

如此一來，一個簡單的需求就實現了，同時大家也掌握了三種居中的情況，這些情況也是我們平時項目中經常用到的，希望對大家有所幫助。

端開發過程中，尺寸單位是我們必須用到的，下面我們對css中常見的幾種尺寸單位px,em,rem,rpx進行逐一介紹

在這之前，需要先對幾個概念進行普及介紹

基本概念

（以下概念讀起來可能有些晦澀，如果看不懂也沒關系）

像素

它不是自然界的物理長度，指基本原色素及其灰度的基本編碼。

css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。

在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。

在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。

后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。

物理像素

它是顯示器（電腦、手機屏幕）最小的物理顯示單位，物理像素指的是顯示器上最小的點。物理像素的大小取決于屏幕。是一個無法改變的屬性。

設備獨立像素

我上一張圖，你就會理解什么是設備獨立像素

就是我們開發過程中使用的css中的px

設備像素比（device pixel radio）

設備像素比=物理像素 / 設備獨立像素，單位是dpr！（device pixel radio）

Retina屏幕

所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。也被稱為視網膜顯示屏 ——百度百科

因為Retina屏幕的出現，在pc端默認情況下，css中的1px等于1物理像素，但在移動端1px不一定等于1物理像素，比如說iPhone的設備獨立像素是375 667，因為它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素為 750 1334

在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈現的大小(物理尺寸)是一致的，不同的是1px所對應的物理像素個數是不一致的。

在普通屏幕下，1px 對應 1個物理像素(1:1)。在Retina屏幕下（dpr=2），1px對應 2x2個物理像素(1:4)。

你會發現，在移動端開發中使用了圖片（img標簽），2倍圖要比1倍圖清晰，就是這個緣故

默認情況下像素px是相對于屏幕分辨率而言，比如說我們的屏幕分辨率是1440 X 900，說的就是像素1440px X 900px；

這里會遇到另一種情況

### 瀏覽器縮放

縮放是縮放CSS像素(縮放比例為1時,一個CSS像素等于一個屏幕像素)，就是在屏幕分辨率不變的情況下，用戶對瀏覽進行了縮放

強調一點，用戶的縮放行為是對瀏覽器進行的，縮放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不論你怎么縮放當前頁面，屏幕分辨率都不會改變

我們知道在移動端可以在一定程度上控制用戶的縮放行為，也可以禁止用戶縮放

<meta name="viewport" content="width=device-width,initial-scale=1.0">

content屬性值 :

width:可視區域的寬度，值可為數字或關鍵詞device-width
height:可視區域的高度，值可為數字或關鍵詞device-height
intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放

但是在pc端就麻煩了

windows：

ctrl + +/-
ctrl + 滾輪
瀏覽器菜單欄

mac：

cammond + +/-
瀏覽器菜單欄

由于瀏覽器菜單欄屬于系統軟件權限，沒發控制，我們可以通過js控制ctrl/cammond + +/- 或 Windows下ctrl + 滾輪縮放頁面的情況

本人在實際開發過程中并沒有使用過em單位，但是后面要說的rem是基于em的，所以，對em進行簡單介紹

em 是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。

em的值并不是固定的；
em會繼承父級元素的字體大小；
任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。body選擇器中聲明Font-size=62.5%<==>1em=10px。

看個栗子吧

<body>
 <style>
 html {
 font-size: 50px;
 }

 .my-div {
 width: 100%;
 height: 500px;
 margin-top: 50px;
 background-color: gray;
 font-size: 40px;
 }

 .my-div .parent-font {
 font-size: 30px;
 }

 .my-div .parent-font .child-font {
 font-size: 0.5em;
 }
 </style>
 <div class="my-div">
 <p class="parent-font">
 我是父級文字
 <span class="child-font">我是子級文字</span>
 </p>
 </div>
</body>

html代碼中，

第一級，html的 font-size: 50px;

第二級，my-div 的 font-size: 40px;

第三級，parent-font 的 font-size:30px;

第四級，child-font 的 font-size: 0.5em;

我們通過瀏覽器查看，發現第四級的fong-size為15px；

我們取消第三級parent-font 的字體大小

我們通過瀏覽器查看，發現第四級的fong-size為20px；

當我們取消第三級font-size后，第三級的字體大小為40px；

所以我們說em的字體大小不是固定的，em的大小取決于父級的字體大小

當父級的字體大小為20px，子級的1em就是20px

當父級的字體大小為30px，子級的1em就是30px

那么說font-size存在著繼承父級的特點

我們在第一級html中設置font-size，第二級繼承第一級，第三級繼承第二級，第四級繼承第三級，以此類推

每一級都繼承自它的父級，也就是說每一級的em所代表的px大小都不是固定的，因為他們的父級不是同一個，所以em的應用場景并不多。

那么如果是em的都繼承自同一個地方，是不是可以解決很多問題呢？

這時候rem出現了

rem

rem 是CSS3的一個相對單位（root em，根em）

使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素

只要html的font-size大小不變，1rem所代表的font-size大小就不會變，rem只取決于html的font-size

rem解決了哪些問題

移動設備的寬度是各種各樣的，每個設備的dpr也不同，換句話說就是不同設備每一行的物理像素數不同，能顯示的css的px數也不同，

如果我們寫一個div，寬度是375px，375px在這個屏幕（iPhone6）上是剛剛滿屏，因為這個屏幕寬度剛剛是375px( 設備獨立像素)，

當我們換另一個寬度是414px的設備（iPhone6Plus）時，這個寬度375px的div就無法鋪滿這個屏幕，同樣的當換一個iPhone5（320px），又會出現滾動條，安卓機的寬度更是五花八門，使用media媒體查詢不靠譜，因為它不能覆蓋所有的機型寬度

我們之前說rem的大小是相對于html的font-size的，如果html的font-size根據不同設備的寬度做動態計算，問題就會得到解決

我們寫頁面都是根據UI設計稿來做的，我們假設UI設計稿的寬度是750px（750px是常規寬度，當然也可以是640px或是其他寬度，但是整個項目，寬度必須統一），唯一不變就是就屏幕寬度，我們的html的font-size（rem）只取決于設備寬度

于是

document.documentElement.style.fontSize=100 * ( document.documentElement.clientWidth / 750) + 'px'

html的font-size：document.documentElement.style.fontSize

設備的寬度：document.documentElement.clientWidth

750：UI設計稿的寬度

為了方便計算我們將font-size x 100，方便計算（乘100不是必須的，我接觸過一些項目就不是乘以100，但是UI設計稿中使用了sketch做了動態計算，但我還是建議乘100，不然遇到psd的設計圖就很麻煩了）

對上面的js做些完善

const fontFun=function () {
 let docEl=document.documentElement
 let resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize'
 const recalc=function () {
 let clientWidth=docEl.clientWidth
 if (!clientWidth) return
 docEl.style.fontSize=100 * (clientWidth / 750) + 'px'
 }
 if (!document.addEventListener) return
 window.addEventListener(resizeEvt, recalc, false)
 window.addEventListener('pageshow', recalc, false)
 document.addEventListener('DOMContentLoaded', recalc, false)
}
export {
 fontFun
}

對以上代碼不做過多解釋

也可以這樣寫

(function(doc, win) {
 var docEl=doc.documentElement,
 resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize',
 recalc=function() {
 var clientWidth=docEl.clientWidth
 if (!clientWidth) return
 docEl.style.fontSize=100 * (clientWidth / 750) + 'px'
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 win.addEventListener('pageshow', recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px

iPhone6(375px)下html的font-size:50px,1rem=50px

iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px

rem是繼承自html的font-size，但是小程序中沒有html，那怎么辦呢？

rpx

我不基于html的font-size了，我基于一個別的值就行了，你也不需要計算這個值，我給你計算了，這就是rpx。

最終的效果就是，你開發時在iphon6的設計稿上量了多少px，就寫多少rpx就行了，完美適配，perfect！

簽屬性命名規范

下劃線連接符命名法“hello_world”

中杠連接符命名法“hello-world”

駱駝式命名法“helloWorld”

　　內容：content/container 導航：nav 側欄：sidebar 　　
　　欄目：column 標志：logo 頁面主體：main 　　
　　廣告：banner 熱點：hot 新聞：news
　　下載：download 子導航：subnav 菜單：menu
　　搜索：search 頁腳：footer 滾動：scroll
　　版權：copyright 友情鏈接：friendlink 子菜單：submenu
　　內容：content 標簽頁：tab 文章列表：list
　　注冊：regsiter 提示信息：msg 小技巧：tips
　　加入：joinus 欄目標題：title 指南：guild
　　服務：service 狀態：status 投票：vote
　　尾：footer 合作伙伴：partner 登錄條：loginbar
　　頁面外圍控制整體布局寬度：wrapper 左右中：left right center 　　
　　
　　(二)注釋的寫法:
　　/* Footer */
　　內容區
　　/* End Footer */
　　
　　(三)id(具有唯一性)的命名:
　　
　　(1)頁面結構
　　容器: container 頁頭：header 內容：content/container
　　頁面主體：main 頁尾：footer 導航：nav
　　側欄：sidebar 欄目：column 左右中：left right center
　　頁面外圍控制整體布局寬度：wrapper
　　(2)導航
　　導航：nav
　　主導航：mainbav
　　子導航：subnav
　　頂導航：topnav
　　邊導航：sidebar
　　左導航：leftsidebar
　　右導航：rightsidebar
　　菜單：menu 子菜單：submenu 標題: title 摘要: summary
　　
　　(3)功能
　　標志：logo
　　廣告：banner
　　登陸：login
　　登錄條：loginbar
　　注冊：regsiter
　　搜索：search
　　功能區：shop
　　標題：title
　　加入：joinus
　　狀態：status
　　按鈕：btn
　　滾動：scroll
　　標簽頁：tab
　　文章列表：list
　　提示信息：msg
　　當前的: current
　　小技巧：tips
　　圖標: icon
　　注釋：note
　　指南：guild
　　服務：service
　　熱點：hot
　　新聞：news
　　下載：download
　　投票：vote
　　合作伙伴：partner
　　友情鏈接：link
　　版權：copyright
　　
　　(四)class的命名:
　　(1)顏色:使用顏色的名稱或者16進制代碼,如
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
　　(2)字體大小,直接使用"font+字體大小"作為名稱,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
　　(3)對齊樣式,使用對齊目標的英文名稱,如
　　.left { float:left; }
　　.bottom { float:bottom; }
　　(4)標題欄樣式,使用"類別+功能"的方式命名,如
　　.barnews { }
　　.barproduct { }
　　
　　注意事項:
　　1.一律小寫;
　　2.盡量用英文;
　　3.不加中杠和下劃線; （我倒是經常加）
　　4.盡量不縮寫，除非一看就明白的單詞. （偷懶經常縮寫）
　　主要的 master.css 模塊 module.css 基本共用 base.css
　　主題 themes.css 專欄 columns.css 打印 print.css
　　文字 font.css 表單 forms.css 補丁 mend.css
　　布局，版面 layout.css

在線咨詢

上一篇：HTTP 報文詳解
下一篇：HTML5特效庫 canvas粒子噴射特效源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 中 div不定寬度如何實現水平居中

您的項目需求