写在前面
CSDN话题挑战赛第1期
- 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
- 参赛话题：前端面试宝典
- 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
题目
如何让网页中的内容快速的居中对齐??
我们都知道，让网页中的内容居中，我们可以使用相对定位和绝对定位，亦或者慢慢调整盒子margin，padding的参数，使其在网页的居中位置，但这些明显都体现不了快速二字，并且这些方法都非常的耗费时间。那么如何快速的实现居中对齐呢？下面我们就一起来看看吧！！
咱们就以下面这个盒子为例：
考点
1.CSS设置垂直水平居中！！
2.Flex布局！！
flex全称Flexible Box模型，顾名思义就是灵活的盒子，不过一般都叫弹性盒子，所有PC端及手机端现代浏览器都支持，所以不用担心它的兼容性，有了这玩意，妈妈再也不用担心我们的布局了。
扫描二维码关注公众号，回复：
14142704 查看本文章
答案
- 设置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。
写在最后
CSDN话题挑战赛第1期