CSS實(shí)現(xiàn)垂直居中在網(wǎng)頁布局中是經(jīng)常會用到的麻裁，所以一定要牢記這些方法以應(yīng)對之嗤朴，寫下這篇文章也是為了鞏固自己的知識點(diǎn)剥懒。
方法一须肆、對父容器使用display: table-cell+vertical-align: middle;使其內(nèi)的子元素實(shí)現(xiàn)垂直居中匿乃；
原理：父元素設(shè)置為表格的單元格元素，而在表格單元格中的元素設(shè)置vertical-align: middle;會使其以中間對齊的方式顯示豌汇；
化身表格元素實(shí)現(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;使子元素與偽元素并排，并且以中間對其的方式進(jìn)行對其赡盘；
偽元素參照物使子元素垂直居中
方法三号枕、設(shè)置上下相同的padding（如果子元素是block或inline-block元素，還可對子元素設(shè)置上下margin相同來達(dá)成同樣效果）陨享；
PS：常用于父元素?zé)o固定高度時葱淳；
原理：利用內(nèi)邊距將內(nèi)容區(qū)域夾在中間；
父元素設(shè)置上下padding使其內(nèi)子元素垂直居中
子元素設(shè)置上下margin使其自身在父元素中居中
方法四抛姑、利用給父元素設(shè)置相對定位赞厕，子元素設(shè)置絕對定位、margin: auto 0;和top: 0; bottom: 0;實(shí)現(xiàn)垂直居中定硝；
原理：因?yàn)閍uto關(guān)鍵詞默認(rèn)自動分配剩余空間皿桑，寬度相對window是固定的，所以margin: 0 auto;可以有水平居中的效果蔬啡，而高度相對window并不是固定的诲侮，所以margin: auto 0;不能垂直居中，所以讓子元素的上下margin值不相對于window進(jìn)行計(jì)算箱蟆，改為相對父元素進(jìn)行計(jì)算即可讓margin: auto 0;生效沟绪；
讓margin: auto 0;生效
方法五、利用絕度定位和負(fù)margin實(shí)現(xiàn)子元素垂直居中空猜；
原理：利用子元素絕對定位绽慈，相對父元素向下移動父元素高度的50%，然后再利用負(fù)margin向上移動自身高度的50%達(dá)到垂直居中效果辈毯；
絕對定位+負(fù)margin達(dá)成垂直居中
其它：利用行高line-height和父元素高一致來實(shí)現(xiàn)文本在父元素中垂直居中久信；
利用行高與父元素高度一致達(dá)成垂直居中
