###元素水平居中###
####行內元素水平居中####
text-align:center;margin:0 auto;根據規範，margin-top: auto; 和 margin-bottom: auto;，其計算值為0。這也就解釋了為什麼 margin: auto; 等同於 margin: 0 auto;
###單行文字垂直居中###
height:n px;
line-height:n px;
vertical-align:middle;text-align + line-height實現單行文字水平垂直居中
我要垂直居中
####方法一####
利用絕對定位元素的盒模型特性，在偏移屬性為確定值的基礎上，設定margin:auto
在子元素寬高已知的情況下，可以配合margin負值達到水平垂直居中效果。
使用絕對定位將content的定點定位到body的中心，然後使用負margin（content寬高的一半），將content的中心拉回到body的中心，達到水平垂直居中的效果。
利用絕對定位元素的偏移屬性和css3的translate(translate 函式的動畫是利用 gpu，能夠減少瀏覽器重繪)來實現的自身偏移達到水平垂直居中的效果。
使用彈性盒子(display: flex)，居中變的很簡單，只想要設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中
在伸縮容器上使用主軸對齊justify-content和側軸對齊align-items
我要實現水平垂直居中
若子元素是影象，可不使用table-cell，而是其父元素用行高替代高度，且字型大小設為0。子元素本身設定vertical-align:middle。
這裡父元素和子元素的寬度都不知道，並且要求子元素的寬度隨著其內容的增加而增加。
我是乙個可以改變寬度的div
左邊右邊
中間
###絕對定位實現###
左邊中間
右邊
###負margin值實現###
中間左邊
右邊
盤點8種css實現垂直居中水平居中的絕對定位居中技術
CSS常見布局
一 聖杯布局 雙飛翼布局 布局特點 左右兩欄固定寬度，中間部分自適應 三列等高 實現乙個左邊100px右邊150px中間自適應的布局 先來看看效果圖 這是top 這是left 這是content 這是多行高度！這是right 這是foot 過程說明 1.先寫乙個基本布局 2.將中間left cont...
CSS常見布局
1.1使用inline block和text align parent.child1.2使用margin 0 auto實現 child1.3使用絕對定位實現 parent child margin left的負值為盒子寬度的一半 1.4使用flex布局實現 parent2.1使用vertical a...
css常見布局
一列布局 1.一列布局 不是自適應 header 頁頭 main 主體內容 footer 頁尾 2.一列寬度自適應布局 要想寬度自適應，只需要按照百分比來設定寬度，內容就可以根據瀏覽器視窗自動調節大小。下例中寬度是自適應的，而高度不是自適應的。頁頭主體內容 頁尾 3.單列經典布局 頁頭左列 右列頁尾...