一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
水平居中总结
情况一:子元素是块级元素,且没有设定宽度
不存在水平居中
因为子元素是块级元素,没有设定宽度,那么它会充满整个父元素的宽度,即水平位置上的宽度和父元素一致
情况二:子元素是行内元素，子元素宽度是由其内容撑开的
给父元素设置 text-align:center
情况三:子元素是块级元素且宽度已经设定
1. 给子元素添加 margin:0 auto;
2. 给父元素和子元素都设定了box-sizing:border-box,设置父元素的padding-left或padding-right = (父宽-子宽)/2
3. 父元素相对定位,子元素绝对定位,子元素left:50%;margin-left: -子宽一半 或 transform:translateX(-50%)
4. 父元素弹性布局,flex-direction: row; justify-content:center;
垂直居中总结
情况一:子元素是行内元素,高度是由内容撑开的
单行:设定父元素的lineheight为其高度来使得子元 素垂直居中子：top:50%; margin-top: -子高一半
多行:通过给父元素设定display:inline/inlineblock/table-cell; vertical-align:middle来解决
情况二:子元素是块级元素但是子元素高度没有设定
1.通过给父元素设定 display:inline/inline-block/table-cell; vertical-align:middle来解决
2.父元素设定display: flex; flex-direction: column; justify-content: center;
情况三:子元素是块级元素且高度已经设定
1.计算子元素的margin-top或margin-bottom或父元素的padding-top或 padding-bottom
(父高-子高)/2
2.利用绝对定位,让子元素相对于父元素绝对定位
子：top:50%; margin-top: -子高一半 或 子：top:50%; transform:translateY(-50%)
3.利用弹性布局
父元素:display: flex;flex-direction: column;justify-content: center;
垂直和水平同时居中
父元素相对定位 子元素绝对定位
已知子元素宽高
top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半
未知子元素宽高
top:50%; left:50%; transform:translate(-50%, - 50%)
弹性布局
display: flex; justify-content: center;align-items: center;
简述px rpx em rem vh vw 的区别
css像素：px
• pc机大屏幕显示器，1px约等于0.76个物理像素
• 手机小屏幕 • 以iPhone6为标准，物理像素750，分辨率375
• 1px=2pt
• 所以，px也是一个相对单位
• px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而 制定的。
• 但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所 有手机上显示一样大。希望能够自动等比缩放。
所以，移动端不要用px
• 通常PC端大屏浏览器的网页，使用px单位较多
• 移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适 应改变大小
em
父元素的字体大小为1em
缺点：如果元素的父级元素层级很多，则计算某个元素的实际字体大小比较 复杂
rem
以网页根元素元素上设置的默认字体大小为1rem 默认1rem=16px
好处:
1.参照唯一根元素上字体大小微调当前元素字体大小，好计算
2.现响应式布局了
响应式布局指的是元素大小能根据屏幕大小随时变化
因为所有以rem为单位的位置、大小都跟着根元素字体大小而变化
所以只要在屏幕大小变化的时候改变根元素font-size就行了
rpx 小程序专用
以iPhone6为标准，物理像素750，分辨率375
无论屏幕大小，都将屏幕分成750份，每份就是1rpx。
1rpx=0.5px=1pt
通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
vh 和 vw
vh:论视口高度多少，都将视口高均分为100份，每1小份就是1vh，所 以，也是相对单位，可随视口大小变化而自动变化。
vw:论视口宽度多少，都将视口宽均分为100份，每1小份就是1vw，所 以，也是相对单位，可随视口大小变化而自动变化。
这里是视口指的是浏览器内部的可视区域大小
响应式布局的方式有哪几种
1. float布局
容易被挤压换行
2. 使用rem作单位，等比缩放
首先，给根元素html设置一个字体大小
然后，其他尺寸单位全部用 rem
然后，监听屏幕的大小,根据屏幕的大小按比例改变根节点字体的大小
因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的,点字体大小一变，其他所有尺寸都会按比例变大或变小
大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小
3.父相子绝
优点:结合使用media可以实现响应式布局
缺点:
代码写法复杂，布局较繁琐
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧
4. flex布局
优点: 代码简单，布局方便
缺点:
如果中间有内容，缩到最小就不会再小了
且左右侧的宽度变小了
5. grid布局
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局
Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元 格，可以看作是二维布局
Grid布局远比 Flex布局强大。(不过存在兼容性问题)
知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局
