1、vertical-align属性让文字居中 vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。 示例： <divstyle="vertical-align:middle;display:table-cell;"> <imgsrc="02.jpg"alt=""> <p>文本居中</p></div> 2、利用行高（line-height）让文字垂直居中 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可。 示例： p{height:30px;line-height:30px;width:100px;overflow:hidden;} 3、利用内边距（padding）让文字垂直居中 使用内边距让文字垂直居中和利用行高让文字垂直居中差不多，同样适合一行或几行文字垂直居中。 示例： p{padding:20px0;} 4、利用CSS3的transform来实现文字垂直居中 示例： .center-vertical{ position:relative; top:50%; transform:translateY(-50%); }.center-horizontal{ position:relative; left:50%; transform:translateX(-50%); } 5、利用flex布局实现文字垂直居中 示例： .flex{/*flex布局*/ display:flex;/*实现垂直居中*/ align-items:center;/*实现水平居中*/ justify-content:center; text-align:justify; width:200px; height:200px; background:#000; margin:0auto; color:#fff; } 转自：http://www.divcss5.com/css3-style/c57297.shtml?eqid=a8a4dab1000053d40000000464291a01
标签：居中,文字,示例,align,垂直,content,flex,css From： https://www.cnblogs.com/z-books/p/18166592