CSS：
重点：父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。
HTML：
CSS：
重点：给父元素添加一个伪元素::before，让这个伪元素的div高度为100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。
HTML：
CSS：
重点：在父元素中设置相对定位position: relative，子元素设置绝对定位 position: absolute；top和left相对父元素的50%，与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。
HTML：
CSS：
重点：子元素绝对定位position:absolute,父元素相对定位position: relative，将上下左右的数值都设置为0，同时margin:auto。绝对定位是会脱离文档流的，这点要注意一下。
HTML：
CSS：
重点：给父元素设置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。
HTML：
CSS：
重点：父元素position定位为relative，子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。
HTML：
CSS：
重点：将父元素设置display:table，子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。
CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。优点
a) 提高开发效率。
b) 规范名称定义，便于维护。
c) 规范项目开发流程
d)css代码更清晰、简单。html代码更合理。
e) 大规模项目中可以减少用户下载
弊端
a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。
b)css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。
