CSS之元素居中

布局网页时，我们也经常会用到的一个方面，就是让一些元素居中，那么让元素居中有哪些办法呢？

一、元素水平居中

1、margin:0 auto;

条件：配合块元素的宽度。

这个经常用到的地方：我们写网页代码时，会让网页居中显示，也是为了美观等。

用法：

    body{

        margin:0 auto;

    }

2、text-align:center;

条件：（添加到父级）配合行级元素（子元素是块级元素，可以使用display:inline-block;转换成行级块元素）。

3、背景，用center(css中)

例如：background:url(xxx.jpg) no-repeat center center;

4、position+负边距（水平、垂直居中都可以）（上一篇有position属性的使用）

5、position：relative；

父级元素：left：50%；子集元素：right：50%；

6、使用CSS3

二、元素垂直居中

1、position+负边距（水平、垂直居中都可以）（上一篇有position属性的使用）

2、line-height = "块级元素的高度"

vertical-align:middle（行级元素）

三、小结

上述居中办法中，最常用的有三个

1、margin:0 auto;（‘0’也不一定是0，可以自己自定义像素大小）

2、text-align:center;

    line-height:'块级元素高度';

这是一对经常在一起使用的属性，使用之后的效果就是元素水平也居中，垂直方向上也居中，也就达到了我们所期望的布局样式。