标签：居中 盒子 元素 css2.01 竖直 继承性 文本 margin

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

文字元素居中显示

单行文本

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。