CSS实现垂直居中的几种方法小结CSS3 不定高宽垂直水平居中的几种方式利用css样式实现表格中字体垂直居中的方法CSS3实现水平居中、垂直居中、水平垂直居中的实例代码手把手教你CSS水平、垂直居中的10种方式(小结)css常用元素水平垂直居中方案css布局教程之如何实现垂直居中CSS垂直居中的另类实现代码详解(不走寻常路)

 //html 
555
 //css .middle{ height: 50px; line-height: 50px; background: red; }

 //html 
 //css .main { width: 200px; height: 300px; line-height: 300px; background: #dddddd; } .middle{ background: red; width: 200px; height: 50px; display: inline-block;//或者display: inline-table; vertical-align: middle; }

 //html 
 //css .main { width: 60px; height: 10%; background: #dddddd; position: relative;//父元素设为相对定位 } .middle{ position: absolute;//设为绝对定位 top: 50%;//top值为50% margin-top: -25%;//设margin-top为元素高度的一半 width: 60px; height: 50%; background: red; }

 //html 
 //css .main { width: 60px; height: 10%; background: #dddddd; position: relative;//父元素设为相对定位 } .middle{ width: 30%; height: 50%; position: absolute;//设为绝对定位 top: 0; bottom: 0;//top、bottom设0即可， left: 0;//如果left、right也设为0则可实现水平垂直都居中 right: 0; margin:auto; background: red; }

 //html 
 //css .main { width: 60px; height: 10%; background: #dddddd; display: flex;//设为flex justify-content: center;//水平居中 align-items: center;//垂直居中 } .middle{ width: 30%; height: 50%; background: red; }