水平硅则、垂直居中布局是每個前端人必備掌握的基礎技能之一，也是各大公司無比常用的面試題之一株婴，可能我們在實踐中用不到這么多的方法怎虫，但是掌握主流的垂直居中布局方法，是一個前端人的必須的職業(yè)素養(yǎng)之一困介，本文歸納總結了筆者認為比較實用的一些方法大审，另外一些奇淫技巧不在本文的討論范圍內
寫在前面
相關代碼我只貼出水平垂直居中的，水平和垂直居中的綜合方案代碼座哩，水平和垂直居中的分別的代碼其實大部分都是融合在水平垂直居中布局中的
水平居中
- 方法一：父元素text-align 子元素必須是inline-block或者inline
- 方法二：子元素設置margin:0 auto
- 方法三：父元素設置position:relative徒扶，子元素通過absolute+left+transform水平居中
注意：這里居中的只是子元素的左邊線，為了讓整個子元素實現(xiàn)真正意義的居中根穷，必須調整至子元素的中線居中姜骡，也就是必須向左調整半個子元素寬度的距離 - 方法四：父元素設置position:relative，子元素通過absolute+left+margin水平居中
注意：這個方法和上面方法三類似屿良，唯一不同的是修正子元素整體定位時圈澈，這里用的是margin-left:-xxx，而方法三用的是css3的transform尘惧，方法三可以不用知道子元素的寬度康栈，方法四必須知道子元素的寬度 - 方法五：flex布局
垂直居中
- 方法一：父元素設置position:relative，子元素通過absolute+top+transform垂直居中
注意：這個方法和水平居中方法三類似喷橙，所以也必須調整中心線居中啥么，另外考慮適配性 - 方法二：父元素設置position:relative，子元素通過absolute+top+margin-top:-xxx垂直居中
注意：這個方法和水平居中方法四類似重慢，所以也必須調整中心線居中饥臂，另外必須知道子元素寬度 - 方法三：文本內容居中 設置line-height等于父級元素高度，文本垂直居中
- 方法四：display:table-cell和vertical-algin: middle 進行垂直居中
注意1：圖片的垂直居中也是用這個屬性vertical-algin: middle
注意2：table-cell無法自動填充父級元素似踱，除非父級元素是display:table隅熙，所以這里也就無法使用width:100%，只能手動設置px寬度核芽，如果想要自適應父元素囚戚，也可以，只需要在外層再套一層父元素轧简，設置為display:table即可
注意3：vertical-algin和line-height這兩個屬性對于行內元素垂直居中是比較常用的驰坊，建議讀者深入了解一下這兩個屬性的用法，這里不做詳細說明 - 方法五：flex布局
總結：塊級元素水平垂直居中
首先列出通用的css樣式
通用css樣式：
/* 父元素通用樣式 */
.containerCommon {
height: 100px;
background-color: gray;
}
/* 子元素通用樣式 */
.itemCommon {
width: 80px;
height: 40px;
background-color: black;
color: white;
}
- 綜合定位方案1
這個方法就是通過父元素設置position:relative哮独，子元素通過absolute+left+top+margin或transform來達到布局要求拳芙，使用margin來調整位置需要知道子元素寬度察藐，使用transform: translate(-50%,-50%)來調整位置，需要考慮適配性
.container-11 {
position: relative;
}
.item-11 {
position: absolute;
left: 50%;
top: 50%;
/*這里不用transform的話舟扎，就必須知道子元素寬度分飞，通過margin-left和margin-right進行位移*/
transform: translate(-50%, -50%);
}
- 綜合定位方案2
這個方法就是通過父元素設置position:relative，子元素通過left:0,right:0,top:0,bottom:0,margin:auto來達到布局要求
.container-12 {
position: relative;
}
.item-12 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
- 利用display:table和display:table-cell特性
說明：table-cell會自動填充table的空間睹限，垂直居中使用vertical-align:middle; 水平居中可以使用行內元素的text-align:center;譬猫，也可以在子元素設置 margin: 0 auto;
.container-13 {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
}
.item-13 {
display: inline-block;
color: white;
background-color: black;
/* margin: 0 auto; */
}
- flex布局
.container-14 {
display: flex;
justify-content: center;
align-items: center;
}
寫在后面
關于介紹的所有方法水平垂直居中布局方法中，在不考慮兼容性的情況下羡疗，首推flex布局染服，flex的特性現(xiàn)在主流瀏覽器都已經兼容到了，簡介易用的語法叨恨，應該沒誰不喜歡用了柳刮，除非是老版本的IE。其次就是綜合定位方案2痒钝，相對比較傳統(tǒng)的定位布局方法诚亚，兼容性都比較好，綜合定位方案1要考慮 transform: translate(-50%, -50%)方法的兼容性
