文章目录
1.用行高实现2.用单元格实现3.用Flex布局实现1.用行高实现
实现思路：
将行高设置成与盒子高度一样的值，这样就可以把文字移到盒子的垂直中心了。
当高度一样的时候，它们的垂直中心就会在同一行，起点都会从垂直中心出发。
再设置水平居中的对齐方式，就能实现水平居中。
接下来，就能实现水平垂直居中的效果了。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height:400px; background-color: green;border: 10px solid gray;line-height: 400px;text-align: center;}</style></head><body> <div class="box">666</div></body></html>
2.用单元格实现
实现思路：
将盒子设置成table cell，也就是表格的列。
盒子变成表格之后，就可以设置单元格垂直居中了，也就是vertical-align: middle;
再设置文本对齐方式，就能实现一行内的文本居中。
接着，就会出现水平垂直居中的效果。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height:400px; background-color: green;border: 10px solid gray;display: table-cell;vertical-align: middle;text-align: center;}</style></head><body> <div class="box">666</div></body></html>
3.用Flex布局实现
Flex是Flexible Box的缩写，意思是弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
justify-content属性 : 定义了项目在主轴上的对齐方式。简单来说是坐标轴的x轴，采用横向的排列方式。
align-items属性 : 定义项目在交叉轴上如何对齐。简单来说是坐标轴的y轴，采用纵轴的排列方式。
参考网址：/w3cnote/flex-grammar.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 400px;height:400px; background-color: green;border: 10px solid gray;display: flex;justify-content: center;align-items: center;}</style></head><body> <div class="box">666</div></body></html>
