1 可以轻松实现 在div中 水平垂直 方向上的居中
2可以动态的自适应屏幕高宽的响应式显示布局
3现在技术成熟了，使用比较灵活，兼容性也很好了 IE8和以下不支持
4做移动端网页比较好用
知识点 display: flex; margin:auto 其他的都时修饰
第一个案例 居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex 水平垂直居中</title>
<style type="text/css">
.container{display: flex;border: 1px solid red;background-color: #ffff;height: 200px; 200px;}
.item{background: #f2f2f2;border: 1px solid red;50px ;height: 50px;margin: auto;}
</style>
</head>
<body>
<div class="container">
<div class="item">
</div>
</div>
</bod