利⽤CSS实现居中对齐
1. ⽂本居中
  ⾸先编写⼀个简单的html代码，设置⼀个类名为parentDiv的div对象。html代码如下：
<div class="parentDiv">
这⾥随意填写~...
</div>
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元素，因此之前需要转化。
[css]
.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代码如下
background: url(xxx.jpg) #ffffff no-repeat center;
2. div居中
  ⾸先编写⼀个简单的html代码，设置⼀个⽗div类名为parentDiv，再设置⼀个⼦div类名为childDiv。html代码如下：
<div class="parentDiv">
<div class="childDiv"></div>
</div>
[css]
* {
-webkit-box-sizing: border-box; /*Safari*/
-moz-box-sizing: border-box; /*Firefox*/
box-sizing: border-box;
}
.parentDiv {
width:400px;
height: 100px;
background-color: #00ff00;
margin: 20px;
}
.childDiv {
width: 200px;
height:50px;
background-color: #ff0000;
}
2.1 ⽔平居中（使⽤margin:auto）
  当div.childDiv对象拥有固定宽度时，设置⽔平⽅向margin为auto，可以实现⽔平居中。
2.2 实现⽔平居中（使⽤text-align:center）
  如果给⼦盒⼦div.childDiv设置display: inline-block不影响整体布局时，可以将⼦盒⼦转化为inline-block，对⽗盒⼦设置text-align:center实现居中对齐。
2.3 table-cell元素居中
  将⽗盒⼦设置为table-cell元素，可以使⽤text-align: center；和vertical-align: middle；实现⽔平、垂直居中。⽐较好的解决⽅案是利⽤三层结构模拟⽗⼦结构。
2.7 Flexbox居中
  使⽤弹性盒模型(flexbox)实现居中。CSS代码：[css]
/*flexbox实现居中*/
.flexBox {
display: -webkit-box; /*Safari*/
display: -moz-box; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: -webkit-flex; /*Chrome*/
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
css设置文字垂直居中-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。