元素居中常见的方法

总结各种元素居中对齐的方法。

1. 首先判断元素的显示模式，为块级元素还是行内元素，

  块级元素：例如 div ,h1, p, ol, ul, li 等标签

  特点：

• 独占一行，宽度默认是容器的100%
• 宽度和高度等可以设置
• 是一个容器盒子，里面可以放行内或块级元素。
• 文字类的元素里面不能放块级元素，p标签里面不能放div

行内(内联)元素：例如span， a, strong, b, em, i, del, s,ins, u 等标签

特点：

• 一行可以放多个元素
• 宽度，高度无效
• 行内元素只能放文本或其他行内元素

行内块元素：例如  img, input, td 等标签

特点：

• 默认宽度是本身的宽度
• 宽高，行高，边外距可以控制
• 一行可以有多个元素，元素之间有间隙

元素显示模式的转换：即一个模式元素转换为另一种模式元素

转换为块元素：Display:block

转换为行内元素：Display:inline

换为行内块元素：Display:inline-block

2. 块级元素水平居中：明确宽度, 元素左右外边距设置为auto，常见为：margin:0 auto.

3. 行内元素和行内块块元素水平居中：给父元素设置 text-align: center

4. 文字 居中：水平居中父元素设置 text-align: center。垂直居中：行高（line-height）等于盒子的高度 。

5. 带有绝对定位的盒子居中：移动的距离 = 浏览器页面的50% - 盒子本身宽高的一半，如下图：