关于CSS中的居中方法

文字居中

【水平居中】

代码：

text-align: center;

【垂直居中】

使行高的高度等于整个块级元素的高度（有局限性：文字只有一行时适用）

代码：

height: 20px;
line-height: 20px;

---

块级元素

• 方法一：
  使用margin属性的auto来自动水平居中。（有局限性：只有子元素的宽度 比父元素的宽度小才生效）

  代码：

  margin: 0 auto;   /*前提：该块级元素设置了宽度*/

• 方法二：
  给子元素设置为相对定位，向右移动50%（left）,再用margin-left偏移负的子元素宽度的一半。当设置垂直居中时，需要设置父元素为相对定位，子元素绝对定位，原理和水平一样（如果设置子元素为相对定位，则子元素的margin会传递到父元素中生效，所以不会产生预想的效果）
  注意：如果想让页面自动居中，当设置margin属性为auto时，不能再设置浮动或绝对定位属性。

  代码：

position: relative;
left: 50%;
width: 1920px;
margin-left: -960px;         /*子元素宽度的一半的负值*/

• 方法三
  水平兼垂直居中：设置父元素为相对定位，设置子元素为绝对定位，将子元素的上下左右设置为0，margin设置为auto。（有局限性：子元素不能超过父元素宽度）
  代码：

/*父元素样式：*/
position: relative;
/*子元素样式：*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;