最常用的方法，也是日常web前端开发中用得最多的通过设置line-height属性与当前元素的高度值一致，但是缺点就是目前的元素的高度必须设置为固定值，没有了更多的灵活性，先举个例子:divclass=parenttext/div//css样式使文本元素垂直水平居中div.parent{width:px;height:px;
vertical-align:middle;
line-height:px;}
2.通过绝对定位元素来使元素进行垂直水平居中，缺点就是子元素必须设置固定的宽度高度值且会以最近的一个设置posiiton为relative的父元素进行定位，如果没有这样的父元素，就以body文档为定位:
divclass=parent
divclass=childdemo/div
/div//css样式
div.parent{position:relative;width:px;height:px;}
div.child{position:absolute;width:px;height:px;margin:auto;left:0;top:0;bottom:0;right:0;}
3.通过table-cell方法进行定位居中，父元素设置宽高度即可：
divclass=parent
divclass=childdemo/div
/div//css样式
div.parent{display:table;}
div.child{display:table-cell;text-aglin:center;vertical-align:middle;}
4.通过CSS3的弹性盒子模型flex进行布局定位:
divclass=parent
divclass=childdemo/div
/div//css样式
div.parent{width:%;height:px;display:flex;justify-content:center;align-items:center;}//或者直接设置子元素
div.parent{width:%;height:px;display:flex;justify-content:center;}div.child{align-self:center;}
5.通过flex的旧版本进行水平垂直居中对齐(其中box-orient类似于新版的flex-direction)：
divclass=parent
divclass=childdemo/div
/div//css样式
div.parent{width:%;height:px;display:box;box-align:center;box-pack:center;}
6.通过绝对定位absolute加margin负值进行居中对齐:
divclass=parent
divclass=childdemo/div
/div//css样式
div.parent{width:px;height:px;position:relative;}
div.child{position:absolute;top:50%;left:50%;right:auto;bottom:auto;width:50px;height:50px;margin-left:-25px;margin-top:-25px;}
7.通过CSS3的transform属性的位移值translate来进行水平垂直居中:
divclass=parent
divclass=childdemo/div
/div//css样式
div.parent{width:px;height:px;position:relative;}
div.child{position:absolute;top:50%;left:50%;right:auto;bottom:auto;width:50px;height:50px;transform:translate(-50%,-50%);}
8.利用上层元素的浮动来进行垂直居中:
divclass=content/div
divclass=nextdemo/div//css样式
div.content{height:50%;float:left；margin-bottom:-px;}
div.next{clear:both;height:px;position:relative;}
如果你也有前端方面的困惑或者需要指导的，欢迎