css实现文本和div居中对齐详细讲解示例

1. 文本居中

首先编写一个简单的html代码，设置一个类名为parentDiv的div对象。html代码如下：

复制代码代码如下:
<div class=”parentDiv”>
这里随意填写~…
</div>

.1 实现文字水平居中（使用text-align）

对div.parentDiv设置text-align: center;来实现。CSS代码如下：

复制代码代码如下:
[css]</p>
<p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /*水平居中*/
}

有些时候，你会发现即使使用了text-align: center;属性，但是仍然没有起到居中的作用。原因就在于div标签本身没有定义自己居中的属性，而且这样做对布局是非常不科学的方法。正确的设置方法其实很简单就是给.parentDiv添加以下属性：margin-left: auto;和margin-right: auto;即可。具体可看2.1。

注：在父级元素定义text-align: center;属性的意思就是在父级元素内的内容居中；对于IE浏览器这样设置就没问题了，但在Mozilla浏览器中却不行。解决办法就是：在子元素定义设定时，再加上margin-left: auto;及margin-right: auto;就没问题了。需要说明的是如果想用这个方法使整个页面要居中，建议不要套在一个div里，可以依次拆出多个div，只要在每个拆出的div里定义margin-left: auto;及margin-right: auto;就行。

1.2 单行文本垂直居中（使用line-height）

文字在层中垂直居中使用vertical-align属性是做不到的，所以这里有个比较巧的方法就是：设置height的高度与line-height的高度相同。CSS代码如下：

复制代码代码如下:
[css]</p>
<p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
line-height: 100px; /* line-height = height */
}

1.3 文本垂直居中（使用vertical-align）

可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化。

复制代码代码如下:
[css]</p>
<p>.outerBox{
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
display:table-cell; /*转化成table-cell元素*/
vertical-align:middle; /*垂直居中对齐，vertical-align适用于内联及table-cell元素*/
}

1.4 图片垂直居中（使用background-position）

 这里指的是背景方法，在div.parentDiv对象中使用background-position属性。CSS代码如下：

复制代码代码如下:
[css]parentDiv {
background: url(xxx.jpg) #ffffff no-repeat center;
}

注：关键就在于最后的center，这个参数定义图片的位置。当然，background-position属性还可以写成“top left"或者"bottom right"等，也可以直接写数值。