最后
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。
做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
使用margin:0 auto来实现
.child{width:200px;margin:0 auto;}
优点：兼容性好
缺点: 需要指定宽度
代码
.children1 {
/* width: 200px;
margin: 0 auto; */ //使用margin:0px auto 实现水平居中
height: 200px;
background-color: pink;
}
放开注释代码效果：
实用flex布局实现
/第一种方法/
.parent{display:flex;justify-content:center;}
/第二种方法/
.parent{display:flex;}
.child{margin:0 auto;}
缺点：兼容性差，如果进行大面积的布局可能会影响效率
代码
.parent {
height: 300px;
width: 800px;
border: solid 1px #2AC845;
display: flex;
justify-content: center;
}
.children1 {
width: 500px;
height: 200px;
background-color: pink;
}
flex效果：
2.垂直居中
vertical-align
/第一种方法/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/第二种方法/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
.parent {
height: 300px;
width: 800px;
border: solid 1px #2AC845;
display: table-cell; //垂直居中
justify-content: center;
vertical-align:middle
}
.children1 {
width: 500px;
height: 200px;
background-color: pink;
/* margin: 0 auto; */ //水平居中
}
效果图：
.parent {
height: 300px;
width: 800px;
border: solid 1px #2AC845;
display: inline-block;
justify-content: center;
vertical-align:middle;
line-height: 300px;
}
效果图：
实用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
实用flex实现
.parent{display:flex;align-items:center;}
3.水平垂直全部居中
利用vertical-align,text-align,inline-block实现
代码
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 200px;
background-color: #2AC845;
}
.children1 {
display: inline-block;
background-color: #EC971F;
height: 100px;
width: 100px;
}
紧跟潮流
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
