实现居中对齐

1. ⽂本居中

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

这⾥随意填写

~... 

1.1 实现⽂字⽔平居中（使⽤text-align）

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

[css]

.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]

.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元素，因此之前需要转化。