CSS垂直居中經常使用的幾種方法

CSS實現垂直居中在網頁佈局中是常常會用到的，因此必定要牢記這些方法以應對之，寫下這篇文章也是爲了鞏固本身的知識點。

方法1、對父容器使用display: table-cell+vertical-align: middle;使其內的子元素實現垂直居中；

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

方法2、父元素設置僞元素並設置僞元素display: inline-block;、vertical-align: middle;和height: 100%，而後設置子元素display: inline-block;、vertical-align: middle;；

原理：父元素設置僞元素，而後讓其內的僞元素高爲父元素的100%高度，再用vertical-align: middle;和display: inline-block;使子元素與僞元素並排，而且以中間對其的方式進行對其；

方法3、設置上下相同的padding（若是子元素是block或inline-block元素，還可對子元素設置上下margin相同來達成一樣效果）；

PS：經常使用於父元素無固定高度時； 原理：利用內邊距將內容區域夾在中間；

方法4、利用給父元素設置相對定位，子元素設置絕對定位、margin: auto 0;和top: 0; bottom: 0;實現垂直居中；

原理：由於auto關鍵詞默認自動分配剩餘空間，寬度相對window是固定的，因此margin: 0 auto;能夠有水平居中的效果，而高度相對window並非固定的，因此margin: auto 0;不能垂直居中，因此讓子元素的上下margin值不相對於window進行計算，改成相對父元素進行計算便可讓margin: auto 0;生效；

方法5、利用絕度定位和負margin實現子元素垂直居中；

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

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