利用CSS实现居中对齐

1. 文本居中

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

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

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

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

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）

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

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）

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

 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居中

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

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

　　实现parentDiv和childDiv父子div的盒子宽高背景色和边框大小。CSS代码如下：

 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 }

2.1 水平居中（使用margin:auto）

　　当div.childDiv对象拥有固定宽度时，设置水平方向margin为auto，可以实现水平居中。CSS代码如下：

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

2.2 实现水平居中（使用text-align:center）

　　如果给子盒子div.childDiv设置display: inline-block不影响整体布局时，可以将子盒子转化为inline-block，对父盒子设置text-align:center实现居中对齐。CSS代码如下：

 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元素居中

　　将父盒子设置为table-cell元素，可以使用text-align: center;和vertical-align: middle;实现水平、垂直居中。比较好的解决方案是利用三层结构模拟父子结构。html代码如下：

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

　　CSS代码如下：

 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 }

2.4 绝对定位居中（利用margin实现偏移）

　　将parentDiv对象设置为定位元素（利用position: relative;属性），将childDiv对象设置为绝对定位，left和top均为50%，这时子盒子的左上角居中对齐，利用margin实现偏移。CSS代码如下：

 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 }

2.5 绝对定位居中（利用transform实现偏移）

　　绝对定位方式与2.4类似，只不过利用transform中的translate实现偏移。CSS代码如下：

 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 }

2.6 绝对定位居中（利用margin:auto实现偏移）

　　同样对子盒子实现绝对定位，这里使用top、right、bottom、left均为0，margin为auto实现偏移。CSS代码如下：

 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 }

2.7 Flexbox居中

　　使用弹性盒模型(flexbox)实现居中。CSS代码：

 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 }