项目介绍 | 插件

Smile电商管理平台：

登录页用的是 bootstrap的弹出框，

表单验证使用的是 bootstrap-validator 表单验证插件

分页查询使用的是：bootstrap-paginator 插件

jQuery-File-Upload插件 -----图片文字的上传（fileupload 文件上传）

nprogress进度条插件nprogress插件是一个适用于ajax应用的轻量级的进度条插件。

Smile电上网：

登录页的样式用的是mui 组件写的

如何实现 div垂直居中

方法一：

父元素相对定位，子元素绝对定位，子元素left 50% top：50% 。 transform：translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
<style>
  #father{
            position: relative;
            width: 600px;
            height: 600px;
            border: 1px solid #000;

      }
  #son{
            background:red;
            width: 100px;
            height: 100px;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
      }

</style>
</head>
<body>
      <div id="father">
            <div id="son">

            </div>
      </div>
</body>
</html>

方法二：

父元素使用display：flex 弹性布局。 justify-content:center 水平居中 align-items:center 垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
<style>
  #father{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
      }
  #son{
            background:red;
            width: 100px;
            height: 100px;
      }

</style>
</head>
<body>
      <div id="father">
            <div id="son">

            </div>
      </div>
</body>
</html>