分类角度一：（文字与非文字）

文字元素居中显示

单行文本

text-align:center;
line-height:16px;

1. 一般都是利用text系列的继承性，给包裹单行文本的盒子添加如上css代码，单行文本会在行内左右居中显示,让line-height行高等于父盒子高度，即可使得单行文本在竖直距离上垂直。以上两个操作使得单行文本水平竖直垂直。
2. text-align的值：居中center；靠左left；靠右right；
3. text-align，这个属性只能设置给文本流（文字，表单，图片），一般都利用text系列，line系列的继承性设置给包裹他们的父盒子，不单独设置给某一具体的文本流
4. 如果给line-height设置的高度超过了盒子的高度，单行文本会垂直于盒子向下居中。

代码失效情况:

1. 代码添加给了多行文本，只对多行文本的最后一行没撑满父盒子width的文本有左右居中的效果。
2. 代码没有设置给文本流（文字，表单，图片）

多行文本

1. 新手多行文本常见误区：多行文本是一个撑满父盒子width从而换行的文本，不是指多个包裹文本的文本标签。
2. 多行文本一般没有水平竖直居中的需要。文本的左右距离一般都通过盒子元素的padding实现

非文字元素居中显示

• 盒子元素

margin:0 auto;

1. 利用margin：0 auto；可以让盒子在父元素中左右居中，margin没有继承性，因此要使哪个盒子左右居中，就给哪个盒子写上。
2. margin：0 auto；margin是外边距的意思，0 是指不设置竖直方向的距离，auto的意思是左右居中。
3. 一个现象（没弄明白）（欢迎讨论）：在margin中，如果给被包裹的盒子设置竖直方向的距离，包裹盒子的父盒子和盒子都会竖直移动，为什么盒子和父盒子之间没有利用margin撑出来距离？

以下是同一问题的其他思考角度（可供思考）：

分类角度二：（盒子内外）

盒子元素

盒内元素

分类角度三：（书写位置）（继承性和非继承性）

直接作用于标签

通过继承性继承

分类角度四：（书写位置）

左右方位居中显示

上下左右居中显示

标签：居中,盒子,元素,css2.01,竖直,继承性,文本,margin
来源： https://blog.csdn.net/yangmiaomiaoye/article/details/120690294