居中对齐（vertical-align: middle/alig

在一个小例子中遇到一个问题：一个div里有多个p标签，不管p标签内容多少，多个p标签必须高度（自定义）相同且文字居中对齐，之前遇到过的居中对齐只要vertical-align: middle;与text-align:cebter;相互配合就可以实现，前提是p标签内容的行数相同。在一个小伙伴的帮助下我了解align-items:center;
align-items 弹性盒的居中对齐，平时是不常使用到的。详细可阅读菜鸟教程http://www.runoob.com/cssref/css3-pr-align-items.html

下面的一个小实例留作参考

1.css

<style>
    *{
        padding:0;
        margin:0;
    }
    div{
        width:1200px;
        overflow: hidden;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top:100px;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;

    }
    p{
        width: 320px;
        border:1px solid blue;
        margin-right: 5px;
        padding-top: 5px;
        text-align: center;
        padding-bottom: 5px;
        align-items: center;
        justify-content: center;
        display: -webkit-flex;
    }
</style>

2.html

<div>
    <p>今天天气不错，适合出去郊游。</p>
    <p>毕业于大学医学院，同等学历研究生。从事普外科医疗、教学和科研工作。</p>
    <p>今天天气不错，适合和朋友们相约去风景不错的地方郊游。也可以相约去寻找一些地方美食。当地的特色风景。</p>
</div>

3.js

  $(function(){
      var arr=[];
         $("p").each(function(){
            $(this).height();
            arr.push($(this).height());
          })
      var max=0;
      for(var i=0;i<arr.length;i++){
        var min = parseInt(arr[i]);
         max = max>min?max:min;
      }
      $("p").height(max);
  })