<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>垂直水平居中</title> </head> <style> /* .box { 500px; height: 500px; background-color: pink; display: grid; } */ /* .box { 500px; height: 500px; background-color: pink; position: relative; } */ /* .box { 500px; height: 500px; background-color: pink; display: flex; justify-content: center; align-items: center; } */ /* .modal { 50px; height: 50px; background-color: forestgreen; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } */ /* .modal { 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; background-color: green; } */ /* .modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: green; } */ /* .modal { background-color: green; align-self: center; justify-self: center; } */ </style> <body> <section class="box"> <div class="modal">1232112312312321311231313</div> </section> <script> let first = `子元素宽高固定的情况:宽高一半；2利用margin auto`; let second = `利用margin auto`; let third = `子元素宽高未知的情况`; let fourthly = `flex布局`; let fifth = `grid布局`; </script> </body> </html>