咱们就以下面这个盒子为例：
考点
1.CSS设置垂直水平居中！！
2.Flex布局！！
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局了。
答案
- 设置html和body的宽高百分比
html,body{ width: 100%; height: 100%; }
- 给body设置display:flex，让其变为Flex容器。
body{ display: flex; }
- 给div设置margin：auto
.div1{ background-color: palegreen; margin: auto; }
完整代码：
<!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> html,body{ width: 100%; height: 100%; } body{ display: flex; } .div1{ background-color: palegreen; margin: auto; } </style> <body> <div class="div1"> <p>实现快速居中</p> <img src="./图片111/cat.gif" alt="动图" width="400px" height="400px"> </div> </body> </html>
扩展
Flex模型:
采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员（如本例中的body），称为Flex项目（flex item）。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
