爱站程序员基地水平居中
内联元素：
text-align:center
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;width: 100px;height: 100px;text-align: center;}span{border: 1px solid;}</style></head><body><div class=\"div1\"><span>aaaa</span></div></body></html>
块级元素:
margin:0 auto：作用为填充剩余尺寸，规则为：
- margin的初始值为0；
- 因为css默认流为水平方向，所以margin:auto只能改变水平的元素内部尺寸
- 一侧为定值，一侧为auto，则auto为剩余空间大小；
- 两侧均为auto，则评分剩余空间；
- 不设置width时：
width默认值为auto，宽度表现为父元素的100%，该div默认居中，要让div里面的文字居中就是行内元素居中，即text-align:center
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;width: 100px;height: 100px;}.div2{border: 1px solid;text-align: center;}</style></head><body><div class=\"div1\"><div class=\"div2\">div2</div></div></body></html>
2. 设置width时：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;width: 100px;height: 100px;}.div2{border: 1px solid;text-align: center;width: 50px;margin: 0 auto;}</style></head><body><div class=\"div1\"><div class=\"div2\">div2</div></div></body></html>
垂直居中
单行文本：
line-height:
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;width: 100px;height: 100px;}.inner{border: 1px solid;line-height: 100px;}</style></head><body><div class=\"div1\"><span class=\"inner\">Lorem</span></div></body></html>
多行文本：
多行文字居中：
1.inline元素就有一行，形状不规则，可以折行，可以和其他元素在一行，行高由大的那一个元素决定，背景色跟着content走。
2.inline-block元素形状为规则的方形，当一行放不下时，会整体下移；可以有多行，每一行都有一个自己的幽灵空白节点。
3.inline元素前的幽灵空白节点的行高继承父元素的行高100px；inline-block元素每一行的幽灵空白节点的行高是自己的，父元素的行高影响的是整个inline-block元素，不是每一行
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>*{margin: 0;}.div1 {border: 1px solid;width: 100px;height: 100px;line-height: 100px;}.inner{border: 1px solid;line-height: 1;display: inline-block;vertical-align: middle;}</style></head><body><div class=\"div1\"><span class=\"inner\">Lorem ipsum dolor sit </span></div></body></html>
