第一種方法： 給父級元素乙個: display : table-cell; vertical-align : middle;就能讓子級元素垂直居中，因為display:table-cell屬效能讓標籤元素以**單元格的形式呈現，類似於td標籤，類似於讓div像table中的td元素處於乙個中間的位置。但也有其侷限性，ie8+才能使用這個方法，ie6，ie7不能識別這種方法。
第二種方法: 同樣的給父級元素乙個：display: flex;align-items: center;justify-content: center;能讓子級元素垂直居中，首先display：flex;為彈式布局，用來為盒狀模型提供最大的靈活性;align-items: center;彈性盒子元素在該行的側軸（縱軸）上居中放置;justify-content: center;彈性盒子元素將向行中間位置對齊,因為本方法中用的全是css3中的屬性，所以ie10+以上才能使用。
第三種方法： 先設定水平居中,再設定垂直居中。即 ：margin : 0 auto;line-height:盒子的高度。
第四中方法：父級給乙個position:relative; 子級div給乙個：position: absolute;top: 50%;left: 50%;margin: -15% 0 0 -25%;height: 30%;width: 50%;
第五種方法：父級給乙個position:relative; 子級div給乙個：
position: absolute; top: 0;bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto;
CSS垂直居中總結
小白總結了平時遇到的css垂直居中的方法，大家在遇到元素垂直居中的需求時，可以從以下三種思路供進行考慮 借助於行高實現垂直居中。借助絕對定位實現垂直居中。在知道足夠的資訊下，使用偏移屬性實現。第一種 借助於行高實現垂直居中 這種方式適用於文字 表單元素等所有的行內元素，適用範圍比較廣泛。實現的方法很...
關於CSS的垂直居中
第一次寫，有點緊張 在頁面中，垂直居中是個老大難的問題，方法各種各樣，我這邊列舉了我最喜歡的方便的幾個方法 1.父元素高度一定，單行文字垂直居中 html部分 我是單行內容 css部分 outside 單行 這個最簡單，單行文字，父元素高度一定，直接設定line height 父元素高度就行了。2....
CSS垂直居中精華總結
1 table cell方式 將center元素的包含框display設定為table，center元素的display設定為table cell，vertical align設定為middle。原理 利用表布局特點，vertical align設定為middle後，單元格中內容中間與所在行中間對齊...