这一部分的东西确实很多很杂，方法多样，限制也重重，掌握不好，你绝对会抓狂，怎么会这样？怎么不行？怎么对不齐？css的基础绝对是重中之重
一些通用方法
水平居中
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
（1）父元素一定，子元素为多行内联
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.farther{
width: 200px;
height: 300px;
display: table-cell;
border: 1px solid #1E90FF;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="farther">
<span class="son">翩若惊鸿，婉若游龙，
仿佛兮若轻云之蔽月，飘摇兮若流风之回雪</span>
</div>
</body>
</html>
（2）子元素宽高确定，父元素宽高不定的子元素垂直水平居中
image.png
html结构
image.png
css结构
image.png
