一、塊級元素寬高固定
1、margin: 0 auto
當元素的width和height值固定時，使用margin可以實現元素的水平居中，無法實現元素的垂直居中
實現
div2、position:absolute、margin負值實現水平垂直居中
【使用relative定位無法實現元素的居中，是因為：使用該定位方式的元素沒有脫離標準文件流，它的位置的偏移是根據它當前所在的文件流設定的，此時它的margin值已經失效】
【使用absolute可以實現，使用該定位方式的元素已經脫離了標準文件流，它的偏移是根據設定了除static定位方式的父元素來設定的】
實現
// margin值的設定需要我們根據元素的width和height值去計算，注意使用margin值的設定在這不能使用百分比
#parent
div
margin值設定為百分比時，是按照父元素的width值來設定的，所以上述情況，如果margin值設定為百分比，那麼margin的取值則為-500px;並不為按照我們預想的去實現元素的水平垂直居中1、position:absolute/fixed、transform: translate(-50%, -50%)實現水平垂直居中
實現
#parent
div
display:flex;flex布局實現子元素的水平垂直居中，只要給父元素設定對應的樣式即可；
無論子元素是否設定width和height值，都會水平垂直居中；
實現
#parent
div
1、display:flex;
實現
#parenttext-align: center;實現
// 給父元素設定如下樣式，內聯元素不需要處理
div
display: table-cell但這種方式ie6、7不支援，只有谷歌、火狐及ie8以上的瀏覽器支援實現
// 給父元素設定如下樣式，內聯元素不需要處理
// vertical-align適用於**元素
div
line-height: height值實現
// line-height的值與height的值一致，文字才會垂直居中
div
前端面試CSS
權重分為四級 代表內聯樣式，如style 權值為 1000 代表 id 選擇器，如 content，權值為 100 代表類 偽類和屬性選擇器，如.content hover attribute 權值為 10 代表元素選擇器和偽元素選擇器，如div p，權值為 1。需要注意的是 通用選擇器 子選擇器 ...
前端面試 css部分
html語義化是html5之後提出來的，在之前的html版本中，頁面是通過一大堆的div css堆砌起來的。當css載入失敗後，頁面非常醜陋，而且沒有所謂的權重。比如文字強調，css載入失敗後，和一般的文字沒有任何區別，而且對於搜尋引擎也不友好，搜尋引擎無法得知頁面的具體什麼內容是重要的,等等。主要...
前端面試之父子div居中
html中布局 father son div div 使用彈性布局 方法一 彈性布局 father son 使用子絕父相 1 方法二 定位方法1 father son 使用子絕父相 2 小演算法 方法三 定位方法2 演算法 father son margin負值的使用方式見我另一篇blog 未寫 使...