html居中问题

一、水平居中（text-align：center）（可继承）
1、行内元素
text-align：取值包括4个：left | right | center | justify
这里的align指的是每行的文字都向一个方向靠。
ps：text-align存在兼容性问题
CSS2.1标准下，center可以居中所有行内元素
CSS1（IE6，7，8）标准下，只有块状元素具有该属性，并且所有元素都会被居中
ps：文字排列方式用writing-mode来控制，有两个值：lr-tb和tb-rl ;
2、块状元素
margin:0 auto;
3、浮动居中
首先要让父元素具有一定宽度，可以在浮动元素外面嵌套一层div，让外层div居中。

二、垂直对齐：
vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
常用的：vertical-align：middle 和 vertical-align：length（可以控制相对于自身内容高度垂直方向上的偏移量）
1、基线的概念（基准线）
英文的基线就是四线格的倒数第二根
以下蓝色线是中文字体的基线

基线是根据行高line-height决定的
2、line-height (行高)
1）行内框的概念
行内框是行内元素里的每个元素（行内元素或者文本）所在框
2）行框的概念
重点，行内框里的所有行内元素和文本必须相对于行内框基线对齐，并且当行内元素嵌套时（即行内框嵌套时），从最内层开始一步一步决定包含它的框的行高以及基线
行框的基线位置是在满足所有内部行内元素对齐的情况下，令此基线最低的位置
3、基线的默认对齐方式
1）文字的 baseline 就不说了。
2）对于 img 和 inline-block 其 baseline 低边框(margin下边缘)。
3）对于input (text)其baseline 根据里面的行内框决定的
对于img等元素，我们可以设置vertical-align:middle调整基线

三、块状元素垂直居中