网页流布局-html文本（水平或垂直方向）居中问题归类

网页流布局-html文本（水平或垂直方向）居中问题归类

元素分为两种：

1. 行级元素
2. 块级元素

还存在一种特殊的情况：行块元素

元素的居中方式：

一、第一大类：(不考虑浮动、定位、flex布局，也就是元素采用网页流布局）

1. 水平居中方式：

• text-align: center; 是给行级元素使用的，而且要放在父级（块元素、行块元素）中
• margin: auto; 自身必须是块级元素，并且必须设置一个宽度
• padding: xx; 设置左右边距，元素必须是行块元素

2. 垂直居中方式：

• vrtical-align: middle 元素必须是行级元素、行块元素（行级元素的默认基准线是baseline）
• padding: xx; 设置上下边距，可以是行块元素、块级元素（原理：因为块级元素的高度会随着内容的高度变更而同步变更）
• line-height: xx; 一般与height属性一致即可实现垂直居中，只适用于内部为单行文本的情况，元素可以是行块元素、块级元素 （设置行高以后，内容会自动垂直居中）

二、第二大类：（浮动之后如何居中）

1. 水平居中：没有任何方式可以水平居中，流布局中的所有水平居中方式全部失效（所以在有水平居中的要求的情况下，不会使用浮动）
2. 垂直居中：只有 line-height 可以做到垂直居中

三、第三大类：（使用定位之后）

设置 postion 为绝对定位 absolute 、固定布局 fixed

可以使用 top right bottom left四个属性来精准控制元素的位置