左右布局
把两个span标签的class分别设置为left和right,就能实现左右布局,width可以自己确定;
内联元素从左往右,遇到阻碍重启一行, 实际上 line-height 的值是多少像素，那么 span 所占的高度就是多少,内联元素左右padding有用,上下padding没用 块级元素从上往下,每个块占一行,高度由内部文档流高度决定
由于两个span标签都在div(块级元素)元素内,所以设定200px是有效的,如果把div改为span,内容多少,高度就是多少左中右布局
注意:content必须在left,right后面,否则content与right面积会部分重合
垂直居中
** 1.**只要将其“line-height”设置成和“height”值一样就可以了,仅适用于单行文本** 2.****Flex 布局：**
不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：
3.绝对定位
内容块的父容器设置为position:relative，使用上述绝对居中方式，可以使内容居中显示于父容器。
水平居中
1.利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。
2.通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
**3.有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。 **
4.利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
display: flex; //变成弹性盒
justify-content: center; //垂直居中
align-items: center; //左右居中
height: 100vh;
