將乙個塊級元素水平居中的方法
要水平居中對齊乙個元素(如 ), 可以使用 margin: auto;。
文字在元素內居中對齊，可以使用 text-align: center;。
使用彈性盒模型 display:flex; justify-content:conter;。
使用絕對定位 position: absolute; left：50%；transform:translate(-50%, -50%);
。
將乙個塊級元素垂直居中的方法
頭部頂部使用 padding:。
使用行高等於高 line-height。
使用彈性盒模型 display:flex; align-items:center;。
使用絕對定位 position: absolute; top：50%；transform:translate(-50%, -50%);
。
是一種css影象合併技術，該方法是將小圖示和背景影象合併到一張上，然後利用css的背景定位來顯示需要顯示的部分。
雪碧圖的優點
減少載入網頁時對伺服器的請求次數。
提高頁面的載入速度。
雪碧圖的缺點
影響瀏覽器的縮放功能。
拼圖維護比較麻煩。
行盒
行盒顯著特徵
行盒可被折斷，因為內容可被折斷換行（可通過word-break屬性設定截斷位置）；
同乙個包含塊中，連續的多個行盒水平依次排列 ；
空白摺疊的規則僅適用於行盒內部和行盒之間 ；
行盒與行盒之間的距離可使用水平方向上的margin和padding進行設定。
行盒的尺寸
行盒可替換元素：和多**；
a.與塊盒完全一致；
行盒的位置：
行內元素和塊級元素的垂直居中，水平居中
一 行內元素 1 行內元素的水平居中 給父級元素使用屬性text align center 2 行內元素的垂直居中 給父級元素使用屬性line hight 父元素盒子的高度 二 塊級元素 1 塊級元素的水平居中 給子級元素使用屬性margin 0 auto 2 行內元素的水平垂直居中，有四種方法 h...
塊級元素水平垂直居中方法
一 加padding減height 垂直水平居中方法一 padding top box2高度 box1高度 2 height 原height值 padding top值 box2 margin 0 auto 脫離標準流的盒子該屬性值失效 優缺點 要先知道盒子的寬高，居中盒子不能脫離標準流 二 子絕父...
塊級 行內元素水平垂直居中方法
塊級元素水平垂直居中 為目標元素設定以下屬性 position absolute top 0 left 0 right 0 bottom 0 margin auto 行內元素水平垂直居中 在目標元素的父元素設定以下屬性 目標父元素內內容水平對齊方式 text align center 此元素會作為乙...