CSS實現(xiàn)垂直居中在網(wǎng)頁布局中是經(jīng)常會用到的，所以一定要牢記這些方法以應(yīng)對之，寫下這篇文章也是為了鞏固自己的知識點。

方法一、對父容器使用display: table-cell+vertical-align: middle;使其內(nèi)的子元素實現(xiàn)垂直居中；

原理：父元素設(shè)置為表格的單元格元素，而在表格單元格中的元素設(shè)置vertical-align: middle;會使其以中間對齊的方式顯示；

化身表格元素實現(xiàn)垂直居中

方法二、父元素設(shè)置偽元素并設(shè)置偽元素display: inline-block;、vertical-align: middle;和height: 100%，然后設(shè)置子元素display: inline-block;、vertical-align: middle;；

原理：父元素設(shè)置偽元素，然后讓其內(nèi)的偽元素高為父元素的100%高度，再用vertical-align: middle;和display: inline-block;使子元素與偽元素并排，并且以中間對其的方式進行對其；

偽元素參照物使子元素垂直居中

方法三、設(shè)置上下相同的padding（如果子元素是block或inline-block元素，還可對子元素設(shè)置上下margin相同來達成同樣效果）；

PS：常用于父元素?zé)o固定高度時；
原理：利用內(nèi)邊距將內(nèi)容區(qū)域夾在中間；

父元素設(shè)置上下padding使其內(nèi)子元素垂直居中

子元素設(shè)置上下margin使其自身在父元素中居中

方法四、利用給父元素設(shè)置相對定位，子元素設(shè)置絕對定位、margin: auto 0;和top: 0; bottom: 0;實現(xiàn)垂直居中；

原理：因為auto關(guān)鍵詞默認(rèn)自動分配剩余空間，寬度相對window是固定的，所以margin: 0 auto;可以有水平居中的效果，而高度相對window并不是固定的，所以margin: auto 0;不能垂直居中，所以讓子元素的上下margin值不相對于window進行計算，改為相對父元素進行計算即可讓margin: auto 0;生效；

讓margin: auto 0;生效

方法五、利用絕度定位和負(fù)margin實現(xiàn)子元素垂直居中；

原理：利用子元素絕對定位，相對父元素向下移動父元素高度的50%，然后再利用負(fù)margin向上移動自身高度的50%達到垂直居中效果；

絕對定位+負(fù)margin達成垂直居中

其它：利用行高line-height和父元素高一致來實現(xiàn)文本在父元素中垂直居中；

利用行高與父元素高度一致達成垂直居中