弹性盒子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.outer{width: 400px;height: 400px;background-color: antiquewhite;display: flex; /*弹性盒子模型*/justify-content: center;/*水平居中*/align-items: center;/*垂直居中*/}.inner{width: 100px;height: 100px;background-color: aqua;text-align: center;/*文字水平居中*/line-height: 100px;/*文字垂直水平居中和高度保持一致*/}
</style>
<body><div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div></div>
</body>
</html>
结果如下
