使用Flex
使用 CSS3 transform
display:relativetransform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;使用 display:table-cell 方法
display:table-cell; text-align:center;vertical-align:middle;display:inline-block;vertical-align:middle;position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。
float屬性的取值：
浮動的特性：
浮動元素的展示在不同情況下會有不同的規(guī)則：
重疊問題
clear屬性 clear屬性：確保當(dāng)前元素的左右兩側(cè)不會有浮動元素。clear只對元素本身的布局起作用。 取值：left、right、both
為什么要清除浮動，父元素高度塌陷 解決父元素高度塌陷問題：一個塊級元素如果沒有設(shè)置height，其height是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標準文檔流，也就是說，父級元素中沒有內(nèi)容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。
方法1：給父級div定義 高度 原理：給父級DIV定義固定高度（height），能解決父級DIV 無法獲取高度得問題。 優(yōu)點：代碼簡潔 缺點：高度被固定死了，是適合內(nèi)容固定不變的模塊。（不推薦使用）
方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both}) 原理：添加一對空的DIV標簽，利用css的clear:both屬性清除浮動，讓父級DIV能夠獲取高度。 優(yōu)點：瀏覽器支持好 缺點：多出了很多空的DIV標簽，如果頁面中浮動模塊多的話，就會出現(xiàn)很多的空置DIV了，這樣感覺視乎不是太令人滿意。（不推薦使用）
方法三：讓父級div 也一并浮起來 這樣做可以初步解決當(dāng)前的浮動問題。但是也讓父級浮動起來了，又會產(chǎn)生新的浮動問題。 不推薦使用
方法四：父級div定義 display:table 原理：將div屬性強制變成表格 優(yōu)點：不解 缺點：會產(chǎn)生新的未知問題。（不推薦使用）
方法五：父元素設(shè)置 overflow：hidden、auto； 原理：這個方法的關(guān)鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā) hasLayout（zoom：1） 優(yōu)點：代碼簡介，不存在結(jié)構(gòu)和語義化問題 缺點：無法顯示需要溢出的元素（亦不太推薦使用）
方法六：父級div定義 偽類:after 和 zoom
.clearfix:after{ content:'.'; display:block; height:0; clear:both; visibility: hidden;}.clearfix {zoom:1;}復(fù)制代碼原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題 優(yōu)點：結(jié)構(gòu)和語義化完全正確,代碼量也適中，可重復(fù)利用率（建議定義公共類） 缺點：代碼不是非常簡潔（極力推薦使用）
經(jīng)益求精寫法
.clearfix:after { content:”\200B”; display:block; height:0; clear:both; }.clearfix { *zoom:1; } 照顧IE6，IE7就可以了復(fù)制代碼詳細關(guān)于浮動的知識請參看這篇文章： http://luopq.com/2015/11/08/CSS-float/
定義：BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有 Block-level box 參 與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局，并且與這個區(qū)域外部毫不相干。
BFC布局規(guī)則 BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
margin決定，取最大值清除浮動原理）。哪些元素會生成 BFC
設(shè)置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding box-sizing屬性可以為三個值之一：
px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算 機系統(tǒng)的數(shù)字化圖像長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。
em 是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置， 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。
有四種：內(nèi)聯(lián)(元素上的style屬性)、內(nèi)嵌(style標簽)、外鏈(link)、導(dǎo)入(@import) link和@import的區(qū)別：
link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持使用Javascript控制DOM去改變樣式；而@import不支持。流式布局 使用非固定像素來定義網(wǎng)頁內(nèi)容，也就是百分比布局，通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進 行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
響應(yīng)式開發(fā) 利用CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局。
由于響應(yīng)式開發(fā)顯得繁瑣些，一般使用第三方響應(yīng)式框架來完成，比如 bootstrap 來完成一部分工作，當(dāng)然也 可以自己寫響應(yīng)式。
區(qū)別
| - | 流式布局 | 響應(yīng)式開發(fā) |
|---|---|---|
| 開發(fā)方式 | 移動Web開發(fā)+PC開發(fā) | 響應(yīng)式開發(fā) |
| 應(yīng)用場景 | 一般在已經(jīng)有PC端網(wǎng)站，開發(fā)移動的的時候只需要單獨開發(fā)移動端 | 針對一些新建的網(wǎng)站，現(xiàn)在要求適配移動端，所以就一套頁面兼容各種終端 |
| 開發(fā) | 正對性強，開發(fā)效率高 | 兼容各種終端，效率低 |
| 適配 | 只適配移動設(shè)備，pad上體驗相對較差 | 可以適配各種終端 |
| 效率 | 代碼簡潔，加載快 | 代碼相對復(fù)雜，加載慢 |
關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容，以及這種不同造成的工作流程的差異
區(qū)別：
display:none
visibility:hidden
display:none的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會重排。opacity:0
visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁面中。設(shè)置height，width等盒模型屬性為0
margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。其他腦洞方法
img { display: block; }img { vertical-align: bottom; }.box { line-height: 0; }“nth-child”選擇的是父元素的子元素，這個子元素并沒有指定確切類型，同時滿足兩個條件時方能有效果：其一是子元素，其二是子元素剛好處在那個位置；“nth-of-type”選擇的是某父元素的子元素，而且這個子元素是指定類型。
轉(zhuǎn)自：https://www.cnblogs.com/lsy0403/p/9323478.html
