利用CSS实现居中对齐

1 div class="parentDiv">
2   这里随意填写~... 
3 div>

1 [css]
2 
3 .parentDiv {
4      width:200px;
5      height:100px;
6      border: 1px solid #ececec;
7      text-align:center;  /*水平居中*/
8 }

　　有些时候，你会发现即使使用了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）

1 [css]
2 
3 .parentDiv {
4     width:200px;
5     height:100px;
6     border: 1px solid #ececec;
7     text-align:center; /* 水平居中 */
8     line-height: 100px; /* line-height = height */
9 }

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

 1 [css]
 2 
 3 .outerBox{
 4       width:200px;
 5       height:100px;
 6       border: 1px solid #ececec;
 7       text-align:center; /* 水平居中 */
 8       display:table-cell; /*转化成table-cell元素*/
 9       vertical-align:middle; /*垂直居中对齐，vertical-align适用于内联及table-cell元素*/ 
10 }

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

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

1 [css]
2 
3 .parentDiv {
4     background: url(xxx.jpg) #ffffff no-repeat center;
5 }

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

2. div居中

1 div class="parentDiv">
2     div class="childDiv">div>
3 div>

 1 [css]
 2  
 3 * {
 4     -webkit-box-sizing: border-box; /*Safari*/
 5     -moz-box-sizing: border-box; /*Firefox*/
 6     box-sizing: border-box;
 7 }
 8   
 9 .parentDiv {
10     width:400px;
11     height: 100px;
12     background-color: #00ff00;
13     margin: 20px;
14 }
15  
16 .childDiv {
17     width: 200px;
18     height:50px;
19     background-color: #ff0000;
20 }

1 [css]
2 
3 /*margin:auto实现水平居中，需要居中的div必须拥有固定的宽度*/
4 .parentDiv .childDiv {
5     margin: 0 auto;
6 }

 1 [css]
 2 
 3 /*
 4 text-align: center;实现水平居中
 5 需要子盒子设置为display: inline-block;
 6 */
 7 .parentDiv {
 8     text-align: center;
 9 }
10 
11 .parentDiv childDiv {
12     display: inline-block;
13 }

2.3 table-cell元素居中

1 div class="parentDiv tableCell">
2     div class="id1">
3         div class="childDiv">tableCelldiv>
4     div>
5 div>

 1 [css]
 2 
 3 /*
 4 table-cell实现居中
 5 将父盒子设置为table-cell元素，设置
 6 text-align: center; vertical-align: middle;
 7 子盒子设置为inline-block元素
 8 */
 9 .tableCell {
10     display: table;
11 }
12 
13 .tableCell .id1 {
14     display: table-cell;
15     text-align: center;
16     vertical-align: middle;
17 }
18 
19 .tableCell .childDiv {
20     display: inline-block;
21 }

 1 [css]
 2 
 3 /*绝对定位实现居中*/
 4 .parentDiv {
 5     position: relative;
 6 }
 7 
 8 .parentDiv .childDiv {
 9     position: absolute;
10     left:50%;
11     top:50%;
12     margin-left:-100px; /*利用margin实现偏移,设置为宽度和高度的一半的负值*/
13     margin-top:-25px;
14 }

 1 [css]
 2 
 3 /*绝对定位实现居中,transform偏移*/
 4 .parentDiv {
 5     position: relative;
 6 }
 7 
 8 .parentDiv .childDiv {
 9     position: absolute;
10     left:50%;
11     top:50%;
12     -webkit-transform: translate(-50%, -50%);
13     -moz-transform: translate(-50%, -50%);
14     -ms-transform: translate(-50%, -50%);
15     -o-transform:translate(-50%, -50%) ;
16     transform:translate(-50%, -50%);
17 }

 1 [css]
 2 
 3 /*绝对定位实现居中,margin:auto实现偏移*/
 4 .parentDiv {
 5     position: relative;
 6 }
 7 
 8 .parentDiv .childDiv {
 9     position: absolute;
10     left:0; /*top、right、bottom、left均为0*/
11     top:0;
12     right: 0;
13     bottom: 0;
14     margin: auto;
15 }

 1 [css]
 2 
 3 /*flexbox实现居中*/
 4 .flexBox {
 5     display: -webkit-box; /*Safari*/
 6     display: -moz-box; /*Firefox*/
 7     display: -ms-flexbox; /*IE*/
 8     display: -webkit-flex; /*Chrome*/
 9     display: flex; 
10     -webkit-box-align: center;
11     -moz-box-align: center;
12     -ms-flex-align: center;
13     -webkit-align-items: center;
14     align-items: center;
15     -webkit-box-pack: center;
16     -moz-box-pack: center;
17     -ms-flex-pack: center;
18     -webkit-justify-content: center;
19     justify-content: center;
20 }