Flex布局实现

  1. <div class="box">
  2. <section class="inner"></section>
  3. </div>
  4. <script>
  5. .box {
  6. display: flex;
  7. justify-content: center; /* 水平居中 */
  8. align-items: center; /* 垂直居中 */
  9. width: 600px;
  10. height: 600px;
  11. }
  12. .inner {
  13. width: 500px;
  14. height: 500px;
  15. background-color: red;
  16. }
  17. </script>