flex-pop

by liubiner

HTML

<!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>flex-pop</title>
  </head>

  <body>
    <div class="popWrap">
      <div class="popContainer">
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br> </p>
        <button class="btnBlock">确定</button>
      </div>
    </div>
  </body>

</html>

CSS

* {
   margin: 0;
   border: 0;
   padding: 0;
 }

 html,
 body {
   height: 100%;
 }

 body {
   margin: 0 auto;
   width: 650px;
 }

 .popWrap {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   padding: 20px 0;
   background: rgba(0, 0, 0, .8);
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   overflow: auto;
 }

 .popContainer {
   width: 80%;
   border-radius: 5px;
   background: #fff;
   padding: 20px;
   color: #555;
   line-height: 1.5;
 }

 .btnBlock {
   display: block;
   margin-top: 20px;
   width: 100%;
   height: 40px;
   line-height: 40px;
   color: #fff;
   font-size: 14px;
   background: #007ACC;
   border-radius: 5px;
 }