以下是根据您提供的内容重构的段落结构：
1. Line-height 适用情景及原理：
- 单行文字(垂直居中):将单行文字的行高设定后，文字会位于行高的垂直中间位置。
- HTML 代码示例：
```html
```
- CSS 代码示例：
```css
.example{
width: 400px;
background: #afddf3;
line-height: 50px;
}
```
2. Line-height + inline-block 适用情景及原理：
- 将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block。由于inline-block在不同浏览器会有空隙产生，因此设定父元素font-size:0来消除，从而达到完美的垂直居中。
- CSS 代码示例：
```css
.example2{
width: 400px;
border: 1px solid #dcdcdc;
line-height: 100px;
font-size: 0;
}
.example2 .con {
display: inline-block;
line-height: 2;
vertical-align: middle;
width: 300px;
font-size: 15px;
background: #afddf3;
}
```
3. ::before + inline-block 适用情景及原理：：:before伪类元素搭配inline-block属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度。我们将利用：:before伪类元素设定为100%高的inline-block,再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了。此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size: 0,子元素font-size: 15px即可。CSS代码示例：
```css
.example3 {
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
}
```
. 单对象水平居中(table + margin)
适用情景：将子元素设置为块级表格，并设置水平居中。
CSS代码：
```css
.example4 {
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example .con {
display: table;
margin: 0 auto;
width: 300px;
font-size: 15px;
background: #afddf3;
}
```
2. 多对象垂直居中(table + table-cell + vertical-align: middle)
适用情景：将多个子元素设置为表格，并使它们垂直居中。
HTML代码：
```html
```
CSS代码：
```css
.example5 {
display: table;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
}
```
以下是重构后的代码：
```css
.example {
display: table-cell;
vertical-align: middle;
width: 300px;
font-size: 15px;
background: #afddf3;
}
.example6 {
position: relative;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example6 .con {
position: absolute;
top: 50%;
height: 80px;
margin-top: -40px;
width: 300px;
font-size: 15px;
background: #afddf3;
}
.example7 {
position: relative;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example7 .con {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 80px;
width: 300px;
font-size: 15px;
background: #afddf3;
}
```
0、Flex布局实现多行文字水平居中
适用情景：多行文字(水平居中)
原理：使用弹性布局(Flexbox),通过设置justify-content属性来调整弹性盒子元素在主轴(横轴)方向上的对齐方式，从而实现多行文字的水平居中。参考CSS-TRICKS。
缺陷：该方法依赖于CSS3属性，低版本浏览器不支持。
显著优势：无需固定定位元素的宽高，代码简洁易懂。
CSS代码：
```css
.example10 {
display: flex;
justify-content: center;
margin-top: 10px;
width: 400px;
}
```
9、Flex布局实现多行文字垂直居中
适用情景：多行文字(垂直居中)
原理：使用弹性布局(Flexbox),通过设置align-items属性来调整弹性子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式，从而实现多行文字的垂直居中。参考CSS-TRICKS。
缺陷：该方法依赖于CSS3属性，低版本浏览器不支持。
显著优势：无需固定定位元素的宽高，代码简洁易懂。
CSS代码：
```css
.example9 {
display: flex;
align-items: center;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
```
8、绝对定位实现多行文字居中
适用情景：多行文字(居中)
原理：利用绝对定位时的top与right设置元素的上方跟左方各为50%,再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。参考CSS-TRICKS。
缺陷：translate是CSS3属性，低版本浏览器不支持。
显著优势：无需固定定位元素的宽高。
CSS代码：
```css
.example8 {
position: relative;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example8 .con {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
background: #afddf3;
}
```
、Flex布局实现多行文字垂直居中
适用情景：多行文字(垂直居中)
原理：使用弹性布局，将项目垂直显示，就像一个列一样。
css代码：
```css
.example {
display: flex;
flex-direction: column;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
```
2、Flex布局实现多行文字垂直居中(带flex-grow属性)
适用情景：多行文字(垂直居中)
原理：使用弹性布局，将项目垂直显示，就像一个列一样。通过设置flex-grow属性，使项目相对于其他灵活的项目进行扩展。
css代码：
```css
.example11 {
display: flex;
flex-direction: column;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example11:before {
content: '';
flex-grow: .5;
}
.example11 .con {
font-size: 15px;
background: #afddf3;
}
```
3、Flex布局实现多行文字水平排列(带margin属性)
适用情景：多行文字(水平排列)
原理：使用弹性布局，将项目水平排列。通过设置margin属性，使项目之间有一定的间距。
css代码：
```css
.example12 {
display: flex;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example12 .con {
margin: auto;
width: 300px;
font-size: 15px;
background: #afddf3;
}
```
4、Flex布局实现单行文字在侧轴方向上对齐(带align-self属性)
适用情景：单行文字在侧轴方向上对齐
原理：使用align-self属性，使单个flex子项在侧轴方向上与其他子项对齐。
css代码：
```css
.example13 {
display: flex;
justify-content: center;
margin-top: 10px;
}
```
以下是重构后的内容：
```css
.example14 {
display: flex;
align-content: center;
flex-wrap: wrap;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example14:before, .example14:after {
content: "";
display: block;
width: 100%;
}
.example14 .con {
height: 80px;
width: 300px;
font-size: 15px;
background: #afddf3;
}
```
```html
图片内容
```
以下是内容重构后的代码：
```html
```
```css
.imgbox-box {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.imgbox {
width: 200px;
height: 200px;
position: relative;
background: #ebf8ed;
overflow: hidden;
}
.imgbox img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
```
