flex弹性布局例子

<style>
ul{
  display: flex;
   width:300px;     
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}
ul li{
    list-style:none;
    background:#6bc3e6;
    border-right:1px solid #fff;
    color:#fff;
}
body,p{margin:0;}
</style>
<body>
    
    <ul>
     <li>音乐</li>
     <li>影视</li>
     <li>旅游</li>
     <li>猪头</li>
    </ul>
</body>

flex垂直居中例子：

<style>
.demo{
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*水平居中*/
  align-items: center;     /*垂直居中*/

}
.inner{
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
}
body,p{margin:0;}
</style>
<body>
    <div class="demo">
      <div class="inner">
        <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
      </div>
    </div>
</body>

display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
justify-content:center;
-webkit-justify-content:center;