一、元素的分类
1.行内元素inline
特点：
- 宽度由其内容决定，无法通过width设置宽度，无法设置height
- 行内元素处在同一行
- 行高，内外边距可以设置
- 行内元素只能包含行内元素及文本，如果包含块级元素则会换行
2.块级元素block
特点：
- 可设置宽高
- 块级元素占一整行
- 块级元素可包含所有标签，但是<p>标签不能包含<div>标签，包含后，<p><div></div></p>会被浏览器编译为<p></p><div></div><p></p>
二、居中方式
1.水平居中
行内元素：设置其父级元素的text-align:center;
块级元素：设置自身元素的margin: 0 auto;块级元素需要设置width才能看到水平居中效果，因为默认占据一行。
万能方法：
1.设置父级元素的display:flex;justify-content:center;
2.设置父级元素的position:relative;自身元素设置position:absolute;left:0;right:0;margin:auto;
2.垂直居中
行内元素：设置父级元素line-height和height的值一致
万能方法：
1.设置父级元素的display:flex;flex-direction:column;justify-content:center;
2.设置父级元素的position:relative;自身元素的position:absolute;top:50%;transform:translateY(-50%);
注意：无法通过设置position:absolute;top:0;bottom:0;margin:auto;进行垂直居中
transform不会影响其他元素的位置，它只会覆盖在其他元素上层
3.水平垂直居中
万能方法：
1.设置父级元素的position:relative;自身元素的position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;---固定宽高有效
注意：设置absolute后，行内元素会变成块级元素（因为会变成BFC），可设置宽高
2.设置父级元素的position:relative;自身元素的position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);---固定宽高有效
3.设置父级元素的display:flex;justify-content:center;align-items:center;
tips:
